JavaScript怎样监听页面加载？

JavaScript 监听页面加载的核心方法是利用 DOMContentLoaded 和 load 事件，具体选择取决于是否需要等待外部资源加载。以下是详细方法及示例：

1. DOMContentLoaded 事件

   触发时机：HTML文档完全加载和解析后触发，无需等待图片、样式表等外部资源。

   适用场景：快速操作DOM元素，提升用户体验。

   代码示例：

   document.addEventListener('DOMContentLoaded', function() { console.log('DOM已就绪，可安全操作元素');});

2. load 事件

   触发时机：页面及其所有依赖资源（如图片、样式表）完全加载后触发。

   适用场景：需确保外部资源加载完成后再执行的操作（如初始化图片轮播）。

   代码示例：

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

1. readyState 属性（不推荐）

   通过检查 document.readyState 判断文档加载状态，但代码繁琐且兼容性较差。

   示例：

   if (document.readyState === 'complete') { console.log('文档已加载完毕');} else { document.addEventListener('readystatechange', function() { if (document.readyState === 'complete') { console.log('文档已加载完毕'); } });}

2. jQuery 的 $(document).ready()

   底层基于 DOMContentLoaded，适合使用jQuery的项目。

   示例：

   $(document).ready(function() { console.log('DOM已就绪（jQuery实现）');});

• 优先选择 DOMContentLoaded：若代码仅操作DOM，无需等待外部资源，可显著提升速度。
• 选择 load 事件：若代码依赖外部资源（如图片尺寸计算），需确保资源加载完成后再执行。
• 对比示例：

  修改DOM样式 → DOMContentLoaded

  初始化图片轮播 → load

1. 图片加载失败监听

   使用 onerror 事件处理图片加载失败，避免阻塞 load 事件。

   示例：

   const img = new Image();img.src = 'image.jpg';img.onload = function() { console.log('图片加载成功'); };img.onerror = function() { console.error('图片加载失败'); img.src = 'default.jpg'; // 替换为默认图片};

2. 异步脚本加载监听

   通过 script.onload 监听动态加载的脚本是否完成。

   示例：

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

3. React 组件中监听加载

   使用 useEffect 钩子监听 load 事件，并在卸载时清理监听器。

   示例：

   import { useEffect } from 'react';function MyComponent() { useEffect(() => { const handleLoad = () => console.log('页面加载完成（React）'); window.addEventListener('load', handleLoad); return () => window.removeEventListener('load', handleLoad); }, []); return <div>My Component</div>;}

• 核心事件：DOMContentLoaded（快速DOM操作）和 load（资源完整加载）。
• 扩展方法：readyState（不推荐）、jQuery的 ready()、异步脚本的 onload、React的 useEffect。
• 选择原则：根据是否依赖外部资源决定事件类型，优先选择性能更优的方案。