JS DOMReady事件的六种实现方法总结

下面我将详细讲解“JS DOMReady事件的六种实现方法总结”的攻略。

一、什么是DOMReady事件？

DOMReady事件是指在页面中DOM树加载完成后触发的事件。在此时我们可以对页面中的DOM元素进行操作。

二、JS DOMReady事件的六种实现方法

1. 利用window.onload事件

window.onload = function() {
    // 页面中所有资源都加载完成后执行的操作
};

这种方法的缺点是必须等到页面中所有资源（包括外部CSS、JS、图片等）都加载完成后才能执行，会导致页面加载时间较慢。

2. 利用defer

<script defer src="script.js"></script>

该方式是在HTML标签中添加defer属性，这种方式只对外部JS文件起作用，在解析HTML文档时，不会影响文档的加载和渲染，会在DOMReady事件触发之前执行。

3. 利用async

<script async src="script.js"></script>

该方式也是在HTML标签中添加async属性，该方式与defer方式类似，只是它不保证JS文件的执行顺序。

4. 利用document.readyState

document.onreadystatechange = function() {
    if (document.readyState == "complete") {
        // 页面中所有资源都加载完成后执行的操作
    }
};

这种方式是通过判断document.readyState属性来执行相应的代码，在document.readyState属性值为complete时执行。

5. 利用DOMContentLoaded事件

document.addEventListener("DOMContentLoaded", function() {
    // DOM树加载完成后执行的操作
});

这种方式是利用DOMContentLoaded事件来实现，它只会检测DOM树的状态，不会等待外部资源的加载完毕。

6. 利用IE的onreadystatechange事件

document.onreadystatechange = function() {
    if (document.readyState == "interactive" || document.readyState == "complete") {
        // DOM树加载完成后执行的操作
    }
};

IE浏览器支持onreadystatechange事件，该事件可以检测DOM树的状态，但是要注意的是IE浏览器下document.readyState属性值为interactive时，并不表示DOM树加载完成。

三、示例

示例一

// 利用DOMContentLoaded事件
document.addEventListener("DOMContentLoaded", function() {
    console.log("DOM树加载完成");
});

这个示例利用了DOMContentLoaded事件，等待DOM树加载完成后执行相关的操作。

示例二

// 利用window.onload事件
window.onload = function() {
    console.log("页面所有资源都加载完成");
};

这个示例利用了window.onload事件，等待所有外部资源都加载完成后执行相关的操作。

这就是关于“JS DOMReady事件的六种实现方法总结”的攻略，希望能够对您有所帮助。