JS 判断页面加载完成方法总结

1. 使用 window.onload 事件

window.onload = function() {
    // 页面所有资源（包括图片、CSS等）加载完成后执行
    console.log('页面完全加载完毕');
};

2. 使用 addEventListener（现代化 Javascript 方式推荐）

window.addEventListener('load', function() {
    // 页面完全加载后执行
    console.log('所有资源加载完成');
});

3. 仅 DOM 加载完成（不等待图片等资源）

document.addEventListener('DOMContentLoaded', function() {
    // DOM 解析完成时触发（无需等待样式表/图片等）
    console.log('DOM 加载完成');
});

JS 判断页面加载完成说明：

• window.onload 会等待所有资源（图片/iframe/CSS等）加载完成
• DOMContentLoaded 在 DOM 树构建完成后立即触发，不等待外部资源：如果不需要等待图片等资源加载，使用 DOMContentLoaded 会让用户感觉页面响应更快。
• 现代开发中推荐使用 addEventListener 而非 onload，因为后者会覆盖之前定义的同类事件

完整示例：

// DOM 就绪时执行
document.addEventListener('DOMContentLoaded', init);

function init() {
    console.log('DOM 准备就绪');
    
    // 完全加载后执行
    window.addEventListener('load', function() {
        console.log('所有资源加载完成');
        // 可以在这里执行需要依赖完整页面的操作
    });
}

其他使用 jQuery 方式：

<script type="text/javascript">
  $(function () {

      ...

  });
</script>

CommandNotFound ⚡️ 坑否 - 其他频道扩展阅读：

• jQuery 事件绑定多个元素
• csc 命令
• xeyes 命令
• jpegoptim 命令
• tcsh 命令

发表评论