javascript ready和load事件的区别

JavaScript012

javascript ready和load事件的区别,第1张

根据ready()方法的API说明

这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded.

即当DOM加载完毕的时候,执行这个指定的方法.

因为只有document的状态ready之后,对page的操作才是安全的.

$(document).ready()仅在DOM准备好的时候执行一次.

与之相比,load事件会等到页面渲染完成执行,即等到所有的资源(比如图片)都完全加载完成的时候.

$(window).load(function(){…})会等整个页面,不仅仅是DOM,还包括图像和iframes都准备好之后,再执行.

而ready()是在DOM准备好之后就执行了,即DOM树建立完成的时候.所以通常ready()是一个更好的时机.

如果DOM初始化完成之后再调用ready()方法,传入的新的handler将会立即执行

注意:ready()方法多次调用,传入的handler方法会串联执行(追加).

而JavaScript中,window.onload是赋值一个方法,即后面的会覆盖掉前面的.

一、DOMContentLoaded和load都是页面加载的时候触发的事件。区别在于触发的时机不一样

二、浏览器渲染页面DOM文档加载的步骤:

1.解析HTML结构。

2.加载外部脚本和css文件。

3.解析并执行脚本代码。

4.DOM树构建完成。(此时会触发DOMContentLoaded事件)

5.加载外部图片等文件。

6.页面加载完毕。(此时会触发load事件)

从以上DOM文档加载步骤上可以看出;当浏览器把DOM树构建完成后就开始触发了DOMContentLoaded事件,而load事件则要等包括图片这些加载完毕才会触发。

我们监听事件的时候把优先级高的可以先监听DOMContentLoaded再监听load。