JavaScript 加载完成检测111

在网页开发中，有时我们需要在 JavaScript 加载完成后执行某些操作。为了实现这一点，有多种方法来检测 JavaScript 的加载完成状态。

内联脚本

最简单的方法就是使用内联脚本：```javascript

= function() {
// JavaScript 加载完成后的操作
};

```

当页面加载完成时，事件将触发，从而执行该函数中的代码。

外部脚本

对于外部脚本，我们可以使用回调函数：```javascript

function loadScript(callback) {
// 创建并附加脚本元素
var script = ('script');
= 'path/to/';
= function() {
callback(); // JavaScript 加载完成后触发回调
};
(script);
}
loadScript(function() {
// JavaScript 加载完成后的操作
});

```

DOMContentLoaded 事件

DOMContentLoaded 事件在 DOM 结构加载完成时触发，它比事件更早触发，因为后者还需要等到所有资源（包括图像和样式）加载完成。```javascript

('DOMContentLoaded', function() {
// JavaScript 加载完成后的操作
});

```

MutationObserver

MutationObserver 可以观察 DOM 的变化，包括脚本的加载。我们可以创建一个 MutationObserver 实例，并在脚本加载时触发回调：```javascript
var observer = new MutationObserver(function(mutations) {
(function(mutation) {
if ( === 'childList' && > 0) {
(function(node) {
if ( === 'SCRIPT' && ('path/to/')) {
// JavaScript 加载完成后的操作
}
});
}
});
});
(, { childList: true });
```

Performance API

Performance API 提供了 PerformanceResourceTiming 接口，它可以提供有关加载资源（包括脚本）的详细信息。我们可以使用它的 loadEventEnd 属性来检测 JavaScript 加载完成：```javascript
var entries = ('resource');
(function(entry) {
if (('path/to/')) {
// JavaScript 加载完成后的操作
}
});
```

异步 JavaScript

对于异步加载的 JavaScript（如使用 async 或 defer 属性的脚本），我们可以使用 Promise 来检测它们何时加载完成：```javascript

var scriptPromise = new Promise(function(resolve, reject) {
('script[src="path/to/"]')[0].onload = function() {
resolve(); // JavaScript 加载完成后的操作
};
});
```

选择最佳方法

选择哪种方法取决于具体情况。和外部脚本的回调函数是简单且通用的选择，而 DOMContentLoaded 事件、MutationObserver、Performance API 和 Promise 提供了更精细的控制。

通过使用上述方法，我们可以可靠地检测 JavaScript 加载完成状态，并相应地执行操作。根据项目的需要和偏好，选择最合适的技术至关重要。

2025-02-03

上一篇：为您的 JS 代码获取准确的图像路径

下一篇：跨平台移动开发：不容错过的 JavaScript 框架指南