🌳浅说一下document.ready和window.load

_橙橙子
211 阅读1分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情

🎈大家好，我是橙橙子，新人初来乍到，请多多关照~

📝小小的前端一枚，分享一些日常的学习和项目实战总结~

😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

概念

  • window

    1. window对象表示浏览器中打开的窗口。
    2. window对象是可以被省略的，例如我们常用的window.console.log()直接写成console.log()

  • document

    1. document对象是window对象的一部分,如：document.body 等价于 window.document.body
    2. 浏览器的html文档称为document对象

$(document).ready()

字面理解就是文档准备好了，也就是浏览器已经加载并解析完整个html文档，DOM树已经建立起来了,然后执行此函数。

原生js写法：

document.ready = function(){
 alert("ready"); 
}

jQuery写法：

$(document).ready(function(){
   alert("ready");
});

// 另一种写法
$(function(){
   alert("ready");
});

$(window).load

在网页中所有元素(包括页面中图片、css文件等)全部加载到浏览器后才执行。

原生js写法：

window.onload = function(){ 
   alert("onload"); 
};

jQuery写法：

$(window).load(function(){
   alert("onload");
});

ready与load执行顺序

DOM文档加载的步骤：

1.解析HTML结构
2.加载外部脚本和样式文件
3.解析执行脚本代码
4.构造HTML DOM模型 // ready
5.加载图片等外部文件
6.页面加载完毕 // load

可以看出，ready在第4步完成之后就执行了，但是load要在第6步完成之后才执行。

区别

1.执行时间

  • $(window).load()要等到页面内包括图片的所有元素加载完毕后才能执行（图片和媒体资源，它们的加载速度远慢于DOM的加载速度）
  • $(document).ready()是DOM结构绘制完就执行。但这并不代表页面的所有数据已经全部加载完成，一些大的图片有会在建立DOM树之后很长一段时间才行加载完成

以浏览器装载文档为例，在页面加载完毕后，浏览器会通过 Javascript为DOM元素添加事件。在常规的Javascript 代码中，通常使用 window.onload 方法，而在 Jquery 中，使用的是 $(document).ready() 方法。 $(document).ready()方法是事件模块中最重要一个函数，可以极大的提高 Web 应用程序的速度。

2.编写个数不同

  • $(window).load不能同时写多个，如果有多个$(window).load()，那么只有最后一个$(window).load()里面的函数或者代码才会执行，之前的$(window).load()都将被覆盖。
  • $(document).ready()可以同时写多个，并且都可以得到执行。

举个栗子

以下代码无法正确执行,结果只输出第二个

$(window).load(function(){ 
    alert("text1"); 
}); 
$(window).load(function(){ 
    alert("text2"); 
});

$(document).ready()能同时编写多个,结果两次都输出

$(document).ready(function(){ 
    alert("Hello World"); 
}); 
$(document).ready(function(){ 
    alert("Hello again"); 
});

3.简化写法

  • $(document).ready(function(){})可以简写成$(function(){})或者$().ready(function(){})

4.执行的效率不同

  • 如要在dom的元素节点中添加onclick属性节点，使用$(document).ready()比$(window).load()的效率高
  • 但是有些时候必须用$(window).load()才行，比如按钮图片出现后添加事件
avatar
文章
阅读
粉丝