js实现onload

实现 JavaScript 的 onload 事件

在 JavaScript 中，onload 事件用于在页面或资源完全加载后执行代码。以下是几种常见的实现方式：

使用 window.onload

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

使用 addEventListener

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

针对特定元素的 onload

对于图片等资源，可以直接在元素上使用 onload：

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

使用 DOMContentLoaded

如果只需要 DOM 加载完成而不等待所有资源，可以使用 DOMContentLoaded：

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM 加载完成');
});

注意事项

• window.onload 会等待页面所有资源（包括图片、样式表等）加载完成
• DOMContentLoaded 在 DOM 树构建完成后立即触发，不等待外部资源
• 多次定义 window.onload 会覆盖之前的定义，而 addEventListener 可以绑定多个处理函数