js实现onload

在JavaScript中实现onload事件

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

使用window.onload

window.onload = function() {
    // 页面完全加载后执行的代码
    console.log('Page loaded');
};

使用addEventListener

window.addEventListener('load', function() {
    // 页面完全加载后执行的代码
    console.log('Page loaded');
});

图片或其他资源的onload

const img = new Image();
img.onload = function() {
    // 图片加载完成后执行的代码
    console.log('Image loaded');
};
img.src = 'image.jpg';

动态脚本的onload

const script = document.createElement('script');
script.onload = function() {
    // 脚本加载完成后执行的代码
    console.log('Script loaded');
};
script.src = 'script.js';
document.head.appendChild(script);

使用jQuery的$(document).ready()

虽然这不是onload（ready在DOM就绪时触发，而非所有资源加载完毕），但有时可作为替代方案：

$(document).ready(function() {
    // DOM就绪时执行的代码
});

注意事项

• window.onload会等待所有资源（图片、样式表等）加载完成。
• 多次赋值window.onload会覆盖之前的处理函数，而addEventListener允许添加多个监听器。
• 对于单个资源（如图片），使用该资源的onload事件更精确。