js加载完成事件

在JavaScript中，“加载完成事件”通常指的是文档加载完成或者图片、脚本等资源加载完成的事件。以下是相关的基础概念及信息：

基础概念

1. DOMContentLoaded事件：

• 当HTML文档被完全加载和解析完成后触发，不需要等待样式表、图片和子框架的加载。
• 此时，可以安全地操作DOM树。

1. load事件：

• 当整个页面及所有依赖资源如样式表和图片都已完成加载时触发。
• 这意味着页面上所有的元素都已经可用。

相关优势

• DOMContentLoaded：
  • 可以更快地执行脚本，提升用户体验。
  • 避免因等待资源加载而造成的延迟。
• load：
  • 确保所有资源都已准备就绪，适用于需要在页面完全加载后执行的操作。

应用场景

• 使用DOMContentLoaded来初始化页面布局或绑定事件处理器。
• 使用load事件来处理需要在所有资源加载完毕后才能执行的操作，如图片尺寸调整或数据分析。

示例代码

DOMContentLoaded事件使用示例：

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded and parsed');
    // 在这里执行DOM相关的操作
});

load事件使用示例：

window.addEventListener('load', function() {
    console.log('All resources finished loading!');
    // 在这里执行需要等待所有资源加载完毕的操作
});

可能遇到的问题及解决方法

问题：页面加载后脚本未执行。

• 原因：可能是脚本放置在文档头部且未使用DOMContentLoaded或defer属性，导致在DOM解析完成前执行。
• 解决方法：将脚本放在文档底部，或者使用DOMContentLoaded事件监听器，或者给<script>标签添加defer属性。

问题：图片或其他资源未加载完成就执行了依赖它们的代码。

• 原因：代码可能在load事件之前执行。
• 解决方法：确保相关代码在load事件监听器内部执行，或使用适当的资源加载检查机制。

总之，合理利用这两个事件可以帮助优化页面加载性能和提升用户体验。