JavaScript如何等到所有元素加载

当网页中存在多个 JavaScript 文件时，浏览器并不保证它们按照指定的顺序依次加载和执行。因此，我们需要使用适当的技术确保在代码执行之前，所有的元素都已经被正确加载。

以下是几种常见的 JavaScript 技术，可以用来等待 DOM 元素的加载：

1. window.onload

当一个页面中所有的文档解析完毕后，window.onload 将被触发。 也就是说，当页面中的所有资源都被下载完毕时，window 状态变为“load”的状态。这种方法适用于简单页面，但它会阻止其他脚本和样式的加载，网络状况不好时会导致页面加载缓慢。

window.onload = function() {
    //所有元素已经加载完毕
};

2. document.readyState

document.readyState 属性返回当前文档的加载状态，有三种可能的值：

• 'loading'，文档仍在加载。
• 'interactive'，文档已被解析完成，但是仍在等待异步资源。
• 'complete'，文档和所有子资源已完成加载，表示所有元素都已经被加载完毕。

使用document.readyState监听文档的状态变化：

document.onreadystatechange = function() {
    if (document.readyState === "complete") {
        // 所有元素已经加载完毕
    }
};

3. DOMContentLoaded

DOMContentLoaded 事件在 HTML 文档被完全加载和解析完成后，而无需等待样式表、图片和子框架的完成加载触发。因此，它比window.onload 更快，并且能够更早地操作 DOM 元素。

document.addEventListener("DOMContentLoaded", function() {
    //DOM 已经加载完毕
});

4. jQuery.ready

jQuery的ready事件是等到DOM加载完毕后才执行的事件，可以确保元素在jQuery代码执行之前已经被加载。

$(document).ready(function() {
    //DOM 已经加载完毕
});

以上是几种常用的方法来等待页面中的所有元素加载完成。使用这些方法，不仅能够确保安全地使用 JavaScript 操作 HTML 元素，而且还能提高页面的性能，避免出现各种莫名其妙的错误。