首页 > 代码库 > jquery load 和ready的区别

jquery load 和ready的区别

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()这种方式很不方便传值。

 

jquery load 和ready的区别