当前位置：首页 > JavaScript

js实现onload

2026-03-13 15:33:38JavaScript

在 JavaScript 中实现 `onload` 事件

onload 事件在页面或资源完全加载后触发。以下是几种常见的实现方式：

使用 window.onload

window.onload = function() {
    console.log('页面和所有资源已加载完成');
};

使用 addEventListener

window.addEventListener('load', function() {
    console.log('页面和所有资源已加载完成');
});

针对特定元素的 onload

js实现onload

const img = document.createElement('img');
img.onload = function() {
    console.log('图片加载完成');
};
img.src = 'image.jpg';

动态脚本加载的 onload

const script = document.createElement('script');
script.onload = function() {
    console.log('脚本加载完成');
};
script.src = 'script.js';
document.head.appendChild(script);

注意事项

js实现onload

window.onload 会等待页面所有资源（图片、样式表等）加载完成。
如果只需要 DOM 结构加载完成，可以使用 DOMContentLoaded 事件。
多次赋值 window.onload 会覆盖之前的处理函数，而 addEventListener 可以添加多个监听器。

使用 `DOMContentLoaded` 的替代方案

如果不需要等待所有资源加载，可以使用更快的 DOMContentLoaded：

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM 加载完成，无需等待图片等资源');
});

现代替代方案：`defer` 和 `async`

对于脚本加载，现代浏览器支持这些属性：

<!-- 异步加载，不阻塞渲染，加载完成后执行 -->
<script src="script.js" async></script>

<!-- 延迟执行，直到 DOM 解析完成 -->
<script src="script.js" defer></script>

兼容性处理

对于老旧浏览器，可以使用以下模式：

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

ready(function() {
    console.log('DOM 准备就绪');
});