当前位置：首页 > JavaScript

js 实现onload

2026-03-15 03:59:55JavaScript

onload 事件的基本用法

在 JavaScript 中，onload 事件用于在页面或资源完全加载后执行代码。可以通过多种方式实现。

window.onload = function() {
    console.log('页面完全加载完成');
};

通过 addEventListener 实现

使用 addEventListener 是更现代且推荐的方式，可以避免覆盖其他事件监听器。

js 实现onload

window.addEventListener('load', function() {
    console.log('页面加载完成');
});

图片或其他资源的 onload

onload 也可以用于图片、脚本等资源的加载完成事件。

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

动态加载脚本的 onload

动态加载脚本时，可以使用 onload 确保脚本加载完成后再执行后续代码。

js 实现onload

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

兼容性与注意事项

window.onload 会等待页面所有资源（如图片、样式表）加载完成，而 DOMContentLoaded 事件在 DOM 树构建完成后立即触发，不等待外部资源。

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

多事件监听的处理

如果需要同时监听多个事件，建议使用 addEventListener 而不是直接赋值 onload，以避免覆盖之前的事件监听器。

window.addEventListener('load', function() {
    console.log('第一个加载事件');
});

window.addEventListener('load', function() {
    console.log('第二个加载事件');
});