1.执行时间
一般来说$(document).ready先onload执行。
ready是文档结构已解释完成后执行,ready是jQuery自定义事件。
onload是文档已加载完成后执行,onload是window对象属性。
一个页面的响应加载顺序如下:
a.域名解析--》b.解释html标签--》c.加载JS和CSS--》d.加载图片等其它信息
$(document).ready在c和d之间执行,onload是在d完成之后执行
最容易来说明二者区别的是img标签,
onload是src肯定加载完成。在用onload设置图片大小时,图片是先完全撑开,然后是重设大小。屏幕会有闪一下,网络快看不出,
慢的话,很明显。图片加载多久,页面就撑开多久,用户体验及差。
ready是浏览器解释完成img标签,src可能未加载完成。ready就不会有此问题。因为ready是在图片还没加载完成就已经设定其大小。
$(document).ready分析:
ready是jQuery的自定义事件。执行ready表示文档结构已解释完成 。
jquery判断文档结构已解释完成关键的方法是:jQuery.bindReady和jQuery.ready,实现原理如下:
1.判断document.readyState的状态,如果状态为complete,表示文档结构已解释完成,执行jQuery.ready方法。
document.readyState几种状态 :
这个属性是只读的,传回值有以下的可能:
0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载。
1-LOADING:加载程序进行中,但文件尚未开始解析。
2-LOADED:部分的文件已经加载且进行解析,但对象模型尚未生效。
3-INTERACTIVE:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。
4-COMPLETED:文件已完全加载,代表加载成功。
jQuery.ready方法先判断body是否存在,存在设置isReady状态为true,然后执行ready自定义事件,不存在则递归调用自己。
2.如果document没有readyState属性或状态不对。根据不同浏览器,分析执行如下:
对标准浏览器绑定:document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false )
对于FF, Chrome, Safari, IE9等浏览器:
DOMContentLoaded 事件在许多Webkit浏览器以及IE9上都可以使用,
此事件会在DOM文档准备好以后触发, 包含在HTML5标准中. 对于支持此事件的浏览器,直接使用DOMContentLoaded事件是最简单最好的选择.
对IE(9之前)浏览器绑定:document.attachEvent( "onreadystatechange", DOMContentLoaded )
IE有 onreadystatechange 当页面加载状态发生改变时执行此方法. 要用此方法,要判断 readyState
DOMContentLoaded中调用jQuery.ready方法,同1中一样。
2.数量问题
一次加载 ready可以执行多次
jQuery(document).ready(function() {
console.log('Ready1');
});
jQuery(document).ready(function() {
console.log('Ready2');
});
输出:
Ready1
Ready2
一次加载 onload只能够执行一次,后页的会把前面的覆盖,如下:
window.onload = function() {
console.log('Onload1');
}
window.onload = function() {
console.log('Onload2');
}
输出:
Onload2
转载于:https://blog.51cto.com/tulang/1076339