js window ready

window.ready 并不是一个标准的 JavaScript 事件或方法。通常，开发者会使用 DOMContentLoaded 事件或者 jQuery 的 $(document).ready() 方法来确保在 DOM 完全加载后执行代码。以下是关于这些概念的基础信息和应用场景：

基础概念

1. DOMContentLoaded 事件：
   • 当 HTML 文档被完全加载和解析完成后触发，无需等待样式表、图像和子框架完成加载。

• jQuery 的 $(document).ready() 方法：
  • 这是一个 jQuery 提供的方法，用于在 DOM 准备好后立即执行代码。它实际上是对 DOMContentLoaded 事件的封装。

优势

• 性能优化：确保脚本在 DOM 加载完成后执行，避免因 DOM 未加载而导致的脚本错误。
• 用户体验：可以更快地响应用户操作，因为关键脚本会在页面加载初期就执行。

类型与应用场景

DOMContentLoaded 事件

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

应用场景：

• 初始化页面布局和样式。
• 绑定事件监听器到 DOM 元素。
• 动态加载内容或执行动画。

jQuery 的 $(document).ready()

$(document).ready(function() {
    console.log('DOM is ready');
    // 在这里执行 jQuery 操作
});

应用场景：

• 当项目中使用了 jQuery 库时，这是一个方便的方式来确保 DOM 准备好。
• 执行依赖于 jQuery 的复杂 DOM 操作或动画。

遇到的问题及解决方法

问题：脚本在 DOM 完全加载前执行

原因：

• 脚本被放置在 HTML 文档的头部，导致在 DOM 元素加载前执行。

解决方法：

• 将脚本标签放在 HTML 文档的底部，紧接在 </body> 标签之前。
• 使用 defer 属性在 <script> 标签中，这样浏览器会在解析 HTML 同时异步加载脚本，并在 DOMContentLoaded 事件触发前执行脚本。

<script src="script.js" defer></script>

• 使用 DOMContentLoaded 事件或 jQuery 的 $(document).ready() 方法来确保脚本在 DOM 加载完成后执行。

通过以上方法，可以有效避免因 DOM 未加载完成而导致的脚本执行错误，提升网页的性能和用户体验。