jQuery-ready与load

 

// ready 在DOM加载完成时运行的代码

$(document).ready(function(){
    // 在这里写代码...
})

// 能够简写为

$(function(){
    // 在这里继续使用$做为别名...
})

 

// load 页面加载完毕后运行代码

$(document).load(function(){
    // 在这里写你的代码...
})

 

区别一：ready 会先于 load 执行

　　了解浏览器加载页面的过程

　　　　一、 解析HTML结构，对html文档进行加载

　　　　二、 加载外部表文件，包含css样式和javascript脚本，而且执行

　　　　三、 html执行完毕

　　　　四、 加载图片、字体等外部文件

　　　　五、页面加载完成

 

　　ready：是在DOM元素加载完成就执行，也就是说在上面的步骤3执行完成后就执行，不须要等待图片、字体等外部文件的加载

　　load：是在页面加载完成后才执行，在上面步骤5完成后才执行。

　　因此按照浏览器的加载页面步骤来讲，ready 会比 load先执行

 

区别二：load 只能编写一个，ready能够编写多个

load编写：

$(document).load(function(){
    alert("load1...");
});
$(document).load(function(){
    alert("load2...");
});

执行后只输出了 load2...

由于他只能执行一个，若是有多个的状况，后面的会覆盖前面的

 

ready编写：

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

执行后两次都输出：ready1...

　　　　　　　　　　ready2...

 

区别三：ready 有简写，而load没有

ready简写：

$(function(){
    // ready简写，在这撸代码
})