jQuery onload与ready

jQuery是一种流行的JavaScript库，用于简化在网页中操作和处理HTML文档的过程。在jQuery中，有两个常用的事件处理方法，即$(document).ready()和$(window).on("load", function())，用于在页面加载时执行JavaScript代码。这两种方法在特定情况下有所不同。

$(document).ready()方法 $(document).ready()方法是jQuery中常用的事件处理方法之一。它是在DOM（文档对象模型）加载完成时触发，表示文档已经准备好进行操作。可以将要执行的JavaScript代码包裹在该方法的回调函数中，以确保代码在DOM就绪后执行。

示例代码如下：

$(document).ready(function() {
  // 在DOM就绪后执行的代码
  // 可以进行DOM操作、事件绑定等
});

在上述示例中，回调函数中的代码将在DOM加载完成后执行。这样可以确保在访问或修改DOM元素之前，它们已经完全加载并准备好。

$(window).on("load", function())方法 $(window).on("load", function())方法是另一种常用的事件处理方法。它是在整个页面（包括图像、样式表和其他资源）加载完成后触发。相比之下，$(document).ready()方法只在DOM加载完成后触发。

示例代码如下：

$(window).on("load", function() {
  // 在整个页面加载完成后执行的代码
  // 可以进行依赖于资源加载的操作
});

上述示例中的回调函数中的代码将在整个页面加载完成后执行。这对于需要等到所有资源都加载完毕后再执行的代码非常有用，比如操作图片的尺寸、计算元素位置等。

区别和使用场景

• 执行时间：$(document).ready()方法在DOM加载完成后立即触发，而$(window).on("load", function())方法在整个页面加载完成后触发。
• 执行顺序：$(document).ready()方法可能在某些资源（如图像）加载完成之前触发，而$(window).on("load", function())方法将等待所有资源加载完成后才触发。
• 使用场景：$(document).ready()适合在DOM就绪后执行代码，如绑定事件、修改DOM元素。$(window).on("load", function())适合在整个页面加载完成后执行代码，如操作依赖于资源加载的元素。

根据具体的需求，可以选择适当的方法。如果只需要在DOM加载完成后执行代码，使用$(document).ready()即可。如果需要等待所有资源加载完成后再执行代码，使用$(window).on("load", function())。