js 实现onload

onload 事件的基本用法

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

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

使用 addEventListener 方法

现代 JavaScript 推荐使用 addEventListener 来绑定事件，避免覆盖已有的事件处理函数：

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

图片的 onload 事件

可以为图片元素单独设置 onload 事件处理程序：

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

动态脚本的 onload

加载外部脚本时也可以使用 onload：

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

替代方案：DOMContentLoaded

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

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

注意事项

• window.onload 会等待页面所有资源（图片、样式表等）加载完成
• 多次直接赋值 window.onload 会覆盖之前的事件处理函数
• 使用 addEventListener 可以避免这个问题，允许添加多个事件监听器
• 对于现代网页，DOMContentLoaded 通常能提供更快的响应时间