js中onload和jQuery中ready的区别

来源：互联网发布：世界各国城市数据库编辑：程序博客网时间：2024/06/07 12:06

1、执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

js代码

    var img = new Image();    img.src = "./浅拷贝.png";    document.body.appendChild(img);    console.log(img.width +' ,'+ img.height);

此时控制台输出如下图（IE浏览器上如下图。而在火狐， edge上就是加载完成，不知道为什么？？）
这里写图片描述
说明img的图像资源还没加载进html中。

当js代码如下时

    var img = new Image();    img.src = "./浅拷贝.png";    document.body.appendChild(img);    img.onload = function(){        console.log(img.width +' ,'+ img.height);    }

此时控制台如下如
这里写图片描述
此时说明img资源加载完毕。

通过上述代码论断。可知onload函数是必须等到页面内包括图片的所有元素加载完毕后才能执行。

2、编写个数不同

window.onload只能执行一个，当你写多个window.onload函数时，只执行最后一个。
$(document).ready()可以同时编写多个，并且都可以得到执行

3、简写形式
- window.onload函数没有简写形式
- $(document).ready()函数的简写形式为$(function(){})

0 0