HTML怎么判断js是否加载完成

HTML（超文本标记语言）是一种用于创建网页的标准标记语言，而JavaScript（简称JS）是一种广泛用于网页开发的脚本语言，在网页开发中，经常会遇到需要在JS加载完成后执行某些操作的情况，本文将详细探讨如何在HTML中判断JS是否加载完成。

1、使用script标签的onload事件

HTML5的<script>标签提供了一个onload事件，当脚本加载完成后会触发这个事件，你可以在你的<script>标签中添加onload属性来实现这一点。

```html

<script src="your-script.js" onload="scriptLoaded()"></script>

```

在上述代码中，your-script.js是你要加载的JavaScript文件，scriptLoaded是一个在脚本加载完成后要执行的函数。

2、使用DOMContentLoaded事件

当HTML文档被完全加载并解析完成时，会触发DOMContentLoaded事件，你可以使用这个事件来确保在执行任何与DOM相关的操作之前，整个文档已经被加载。

```javascript

document.addEventListener('DOMContentLoaded', function() {

// 你的代码

});

```

3、使用window.onload事件

window.onload事件与DOMContentLoaded类似，但它会等待所有资源（包括图片等）加载完成后才触发，这在某些情况下可能比DOMContentLoaded更合适。

```javascript

window.onload = function() {

// 你的代码

};

```

4、使用Promise和async/await

如果你正在使用现代JavaScript特性，可以使用Promise和async/await来确保在执行后续代码之前，JavaScript文件已经被加载。

```javascript

async function loadScript(url) {

return new Promise((resolve, reject) => {

const script = document.createElement('script');

script.src = url;

script.onload = () => {

resolve();

};

script.onerror = () => {

reject(new Error('Script load error'));

};

document.head.appendChild(script);

});

}

async function main() {

await loadScript('your-script.js');

// 你的代码

}

main();

```

5、使用动态创建的script标签

你还可以通过动态创建<script>元素并添加到页面中，然后监听其load事件来判断脚本是否加载完成。

```javascript

function loadScript(url, callback) {

const script = document.createElement('script');

script.src = url;

script.onload = function() {

if (typeof callback === 'function') {

callback();

}

};

document.head.appendChild(script);

}

loadScript('your-script.js', function() {

// 你的代码

});

```

6、使用外部JavaScript文件

如果你的JavaScript代码是在一个外部文件中，你可以在该文件的最后添加一个函数，该函数在执行完毕后会被调用。

```javascript

// your-script.js

function scriptLoaded() {

// 你的代码

}

// 确保这是文件中的最后一个语句

scriptLoaded();

```

然后在HTML文件中，你可以按照正常方式引入这个外部脚本文件。

```html

<script src="your-script.js"></script>

```

7、使用MutationObserver监听DOM变化

如果你需要在某个特定的DOM元素加载完成后执行操作，可以使用MutationObserver来监听DOM的变化。

```javascript

const targetNode = document.getElementById('your-element');

const config = {

attributes: true,

childList: true,

subtree: true

};

const callback = function(mutations) {

if (/* 你的条件 */) {

this.disconnect();

// 你的代码

}

};

const observer = new MutationObserver(callback);

observer.observe(targetNode, config);

```

8、使用第三方库

如果你觉得原生JavaScript实现起来比较复杂，可以使用第三方库如RequireJS或SystemJS来帮助管理脚本的加载和依赖。

在HTML中判断JavaScript是否加载完成有多种方法，每种方法都有其适用场景，在选择方法时，需要根据你的具体需求和项目情况来决定，对于简单的页面，使用onload事件或DOMContentLoaded事件可能就足够了；而对于复杂的单页应用（SPA），可能需要使用Promise、async/await或第三方库来更好地管理脚本的加载和执行顺序。