jquery load 和ready的区别

Posted 2020-09-26

jQuery有3种针对文档加载的方法

$(document).ready(function() {
    // ...代码...
})
//document ready 简写
$(function() {
    // ...代码...
})
$(document).load(function() {
    // ...代码...
})

一、要了解两者的区别必须要搞清HTML页面的加载渲染的顺序，html页面到底是怎么加载？　　

　　1、解析html结构（当浏览器获得一个html文件时，会“自上而下”加载）；

　　2、加载外部脚本和样式文件（加载css文件和js文件）；

　　3、解析并执行脚本代码和样式文件；

　　4、构造HTML DOM模型；

　　5、加载图片等外部文件；

　　6、页面加载完毕；

 以上的便是html的加载渲染顺序，为什么要了解？因为load和ready加载的是有加载顺序的。

二、load和ready加载的加载顺序？

　　ready事件是在等到HTML DOM构造完成后执行的；而load事件的执行是在页面加载完成后在执行的。所以ready事件要优先于load事件。如果一页网页有大量图片的话，则就出现网页文档已经呈现出来但网页数据(脚本初始化)还没加载完毕，导致load事件不能够即时被触发。所以laod事件慎用。但是也不推荐用这$（docment）.ready()这种方式很不方便传值。