window.onload 和 DOMContentLoaded-优快云博客

本文链接：https://blog.youkuaiyun.com/ihuning/article/details/84715107

本文对比了DOMContentLoaded事件与window.onload事件的区别，详细解释了DOMContentLoaded在DOM树构建完成后即触发，而window.onload则等待整个页面包括图片等资源加载完毕后才触发。通过一个简单的示例演示了两种事件触发时机的不同。

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

相信写js的，都知道window.onload吧，但是并不是每个人都知道DOMContentLoaded，其实即使你不知道，很有可能你也经常使用了这个东西。

一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后，绑定事件到元素，我们并不需要图片元素，加上有时候加载外域图片的速度非常缓慢。

我们可以写代码来简单测试一下这两种事件：

javascript代码（引入了jQuery1.4.1)：

if(document.addEventListener){

    function DOMContentLoaded(){

        $("#status").text("DOM is ready now!");

    }

    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}

window.onload=function(){

            $("#status").text("DOM is ready AND wondow.onload is excute!");
}

HTML 代码 body 部分：

<h1> DOM READY's TEST </h1>

<img src="./delay.php" alt="delay image" />

<p id="status"> DOM is not ready </p>

为了清楚的看到效果，特意写个简单的php文件，提供图片延时加载，代码如下：

sleep(5);

header('Location:./delay.png');

在firefox和chrome以及opera中都可以清楚的看到，在图片未载入之前，id为status的段落已经显示了“DOM is ready now!”，然后等5秒钟后，图片加载完成后，此段落显示”DOM is ready AND wondow.onload is excute!”

此代码并不能在IE中工作，一方面是因为我使用的是addEventListener，开始前做了个判断，不存在此方法则不添加此事件。这样做的原因是IE确实是不支持DOMContentLoaded这个事件的，为了代码的简单，就没为IE写了。虽然IE没有此事件，但是我们却可以来模拟这个事件，常见的方法是判断element的doScroll如果成功则说明DOM载入完成。

常见的库中都提供了此事件的兼容各个浏览器的封装，如果你是个jQuery使用者，你可能会经常使用$(document).ready();或者$(function(){}) 这都是使用了DOMContentLoaded事件