利用DOMContentLoaded判断DOM是否加载完毕_小程序判断页面元素全部加载完毕-优快云博客

本文链接：https://blog.youkuaiyun.com/learninginJAVA/article/details/49046025

本文介绍了如何在不同浏览器环境下利用DOMContentLoaded和onreadystatechange事件判断DOM是否加载完毕。针对IE8以下版本，可以检查doScroll('left')是否报错；IE8及以上版本和主流浏览器则直接监听DOMContentLoaded事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

浏览器提供一个document.onload事件，但这是页面的全部数据都加载完毕，如果页面有太多图片的话，事件要等很久才触发。如果能在DOM树构建完毕就开始动作就会快很多。

核心思想

IE8以下的版本可以通过检查document.documentElement.doScroll('left')是否报错来判断
IE8支持onreadystatechange事件，每当document.readyState改变的时候，就会触发一次（所以只要在readyState的值为completed就是加载完毕）
IE9及其他主流浏览器支持DOMContentLoaded事件，直接注册其事件处理程序即可

简略步骤

其中DOMContentLoaded函数假设是我们的事件处理程序

在IE中

先完成IE8的绑定

document.attachEvent('onreadystatechange', DOMContentLoaded);

再来保证一定在load时执行

window.attachEvent('onload',DOMContentLoaded);

再用考虑非frame下IE8一下版本的情况

window.frameElement == null; // 不是frame时，frameElement值为null
doScrollCheck = function () {
    try {
        document.documentElement.doScroll('left'); // 在DOM加载完前会报错
    }
    catch {
        setTimeout(doScrollCheck, 1);
    }
}

在IE8以上的版本或其他主流浏览器中

直接利用DOMContentLoaded事件

document.addEventListener('DOMContentLoaded', DOMContentLoaded, false);
window.addEventListener('load', DOMContentLoaded, false)

网上专门实现该功能的代码

jquery.documentReady.js

contentloaded.js