jQuery onload与ready

2023-05-18 14:42:10 浏览数 (1)

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

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

示例代码如下:

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

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

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

示例代码如下:

代码语言:javascript复制
$(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())

0 人点赞