JavaScript window.onload 和 window.onDOMContentLoaded 的区别

风茫

712人浏览 · 2025-08-29 08:00:00

风茫 · 2025-08-29 08:00:00 发布

文章目录

概述
- window.onload
- - 定义
  - 特点
- DOMContentLoaded
- - 定义
  - 特点
- 对比示例
- 使用场景
- 兼容性
- 总结

概述

window.onload 和 DOMContentLoaded 是两个重要的页面加载事件，它们在网页加载过程中触发的时机不同，用途也有所区别。

window.onload

定义

window.onload 事件在页面的所有资源（包括 DOM、CSS、JavaScript、图片、音视频等）完全加载完成后触发。

特点

等待所有资源加载完毕才触发
包括图片、样式表、脚本、iframe 等外部资源
触发时间相对较晚

window.onload = function() {
    console.log("所有资源加载完成");
    // 此时可以安全地操作页面上的任何元素
};

// 或者使用 addEventListener
window.addEventListener('load', function() {
    console.log("所有资源加载完成");
});

DOMContentLoaded

定义

DOMContentLoaded 事件在 HTML 文档完全加载和解析完成后触发，无需等待样式表、图像等外部资源加载完成。

特点

仅等待 DOM 结构加载完成
不等待 CSS、图片、音频等外部资源
触发时间较早，性能更好

document.addEventListener('DOMContentLoaded', function() {
    console.log("DOM 加载完成");
    // 此时可以操作 DOM 元素，但外部资源可能尚未加载完成
});

对比示例

<!DOCTYPE html>
<html>
<head>
    <title>加载事件测试</title>
</head>
<body>
    <img src="large-image.jpg" alt="大图片">
    <script>
        console.log("脚本执行时间");
        
        document.addEventListener('DOMContentLoaded', function() {
            console.log("DOMContentLoaded 触发");
            // 此时可以操作 DOM 元素
        });
        
        window.onload = function() {
            console.log("window.onload 触发");
            // 此时图片等资源也加载完成了
        };
    </script>
</body>
</html>

执行顺序：

“脚本执行时间”
“DOMContentLoaded 触发”
(等待图片加载完成)
“window.onload 触发”

使用场景

DOMContentLoaded 适用于：

初始化页面 DOM 操作
绑定事件处理器
设置页面交互功能
需要尽早执行的 JavaScript 代码

window.onload 适用于：

需要操作图片尺寸的场景
依赖外部资源的初始化操作
需要确保所有内容完全加载后才执行的代码

兼容性

DOMContentLoaded: IE9+ 及现代浏览器支持
window.onload: 所有浏览器都支持

对于 IE8 及以下版本，可以通过 document.readyState 来模拟 DOMContentLoaded：

function ready(fn) {
    if (document.readyState !== 'loading') {
        fn();
    } else if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', fn);
    } else {
        document.attachEvent('onreadystatechange', function() {
            if (document.readyState === 'complete') {
                fn();
            }
        });
    }
}

总结

特性	DOMContentLoaded	window.onload
触发时机	DOM 解析完成	所有资源加载完成
执行速度	较快	较慢
适用场景	DOM 操作初始化	资源依赖操作
推荐使用	大多数情况	需要完整资源时