js页面加载时事件

在JavaScript中，页面加载时会触发多种事件，这些事件允许开发者在不同的加载阶段执行特定的代码。以下是一些常见的页面加载事件及其基础概念：

1. DOMContentLoaded

基础概念：当HTML文档被完全加载和解析完成后，不需要等待样式表、图片和子框架的加载，就会触发此事件。 优势：可以在DOM树构建完成后立即执行脚本，而不必等待所有资源加载完毕。 应用场景：初始化页面布局、绑定事件处理器等。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded and parsed');
});

2. load

基础概念：当整个页面及所有依赖资源如样式表和图片都已完成加载时，触发此事件。 优势：确保所有资源都已加载，适合进行最终的页面调整或数据分析。 应用场景：图片尺寸调整、页面统计等。

示例代码： window.addEventListener('load', function() { console.log('All resources finished loading!'); });

3. beforeunload 和 unload

基础概念：beforeunload 在页面卸载之前触发，unload 在页面卸载时触发。 优势：可以用来提示用户是否确认离开页面，或者在页面关闭前执行一些清理工作。 应用场景：防止数据丢失、记录用户行为等。

示例代码： window.addEventListener('beforeunload', function (e) { e.preventDefault(); // 标准化方式 e.returnValue = ''; // 兼容旧浏览器 });

window.addEventListener('unload', function() { console.log('Page is unloading'); });

### 4. `readystatechange`
**基础概念**：当文档的加载状态改变时触发，可以用来检测文档是否已经加载完成。
**优势**：可以在不同阶段执行不同的操作。
**应用场景**：逐步加载内容、优化用户体验等。

**示例代码**：
document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
        console.log('Page fully loaded');
    }
});

常见问题及解决方法

问题1：DOMContentLoaded 和 load 事件的区别是什么？

原因：DOMContentLoaded 只关注DOM树的构建完成，而 load 关注所有资源的加载完成。 解决方法：根据具体需求选择合适的事件。

问题2：为什么 beforeunload 事件的处理函数需要返回值？

原因：一些浏览器需要返回值来显示确认对话框，以防止用户意外离开页面。 解决方法：返回一个非空字符串，或者设置 event.returnValue。

问题3：如何确保脚本在DOM加载完成后执行？

原因：如果在DOM加载完成前执行脚本，可能会导致找不到元素或操作失败。 解决方法：将脚本放在 </body> 标签之前，或者使用 DOMContentLoaded 事件。

通过理解和正确使用这些事件，可以优化页面加载性能和用户体验。