jQuery中onload与ready区别
onload和ready的区别
document.ready和onload的区别为:加载程度不同、执行次数不同、执行速度不同。
1、加载程度不同
document.ready:是DOM结构绘制完毕后就执行,不必等到加载完毕。意思就是DOM树加载完毕就执行,不必等到页面中图片或其他外部文件都加载完毕。
onload:是页面所有元素都加载完毕,包括图片等所有元素。
2、执行次数不同
document.ready可以写多个.ready,可以执行多次,第N次都不会被上一次覆盖。
onload只能执行一次,如果有多个,那么第一次的执行会被覆盖。
3、执行速度不同
onload除了要等待DOM被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在onload事件上的代码在执行时有明显的延迟。
document.ready函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。