$(document).ready()方法和window.onload有什么区别?

简介: $(document).ready()方法和window.onload有什么区别?

      1.触发时间点:$(document).ready() 方法在 DOM 树构建完毕,并且所有的 DOM 元素都可以操作时触发,不需要等待所有的资源(如图片)都加载完成。而 window.onload事件是在所有的资源都加载完成后触发。

       2.执行顺序:$(document).ready() 方法可以多次调用,它们会按照调用的顺序依次执行。而 window.onload 事件只能被绑定一次,如果多次调用,只有最后一个绑定的事件会执行。

       3.页面加载状态:$(document).ready() 方法在页面的加载过程中就会触发,即使页面的其他资源还没有加载完成。而 window.onload 事件只有在页面的所有资源都加载完成后才会触发。

       4.使用方式:$(document).ready() 方法是 jQuery 提供的,需要引入 jQuery 库,并使用 jQuery 的语法来调用。而 window.onload 是 JavaScript 原生提供的事件,可以直接在 JavaScript 中使用。

       综上所述,$(document).ready() 方法更适用于在 DOM 准备完毕后执行一些操作,比如修改 DOM 结构、绑定事件等。而 window.onload 事件适用于在页面所有资源加载完成后执行一些需要依赖所有资源的操作,比如操作图片、视频等。

       以下是一串代码示例来区分 $(document).ready() 方法和 window.onload 事件:

// 使用 $(document).ready() 方法
$(document).ready(function() {
  // 在 DOM 准备完毕后执行的操作
  console.log("DOM is ready");
});
// 使用 window.onload 事件
window.onload = function() {
  // 在页面所有资源加载完成后执行的操作
  console.log("All resources are loaded");
};

在这个示例中,当页面加载时,首先会触发 $(document).ready() 方法,然后在所有资源加载完成后会触发 window.onload 事件。你可以在控制台中查看两个不同的日志输出。

需要注意的是,如果使用了 jQuery 库,并且使用了 $(document).ready() 方法,那么可以简写为:

$(function() {
  // 在 DOM 准备完毕后执行的操作
  console.log("DOM is ready");
});

这种简写方式与 $(document).ready() 的效果是一样的。


相关文章
|
2月前
|
JavaScript
document load 和 document ready 有什么区别
document load 和 document ready 有什么区别
62 0
|
15天前
|
JavaScript 前端开发
load、$(document).ready、DOMContentLoaded的区别
load、$(document).ready、DOMContentLoaded的区别
|
18天前
|
JavaScript 前端开发
document load 和 document ready 的区别
document load 和 document ready 的区别
|
2月前
|
JavaScript 前端开发 UED
深入理解 Document Load 和 Document Ready 的区别
深入理解 Document Load 和 Document Ready 的区别
42 0
window.onload不能正常执行
window.onload不能正常执行
111 0
|
JavaScript
Dom onload和jQuery document ready的区别
Dom onload和jQuery document ready的区别
Dom onload和jQuery document ready的区别
|
JavaScript
HTML里Dom onload和jQuery document ready这两个事件的区别
HTML里Dom onload和jQuery document ready这两个事件的区别
115 0
HTML里Dom onload和jQuery document ready这两个事件的区别