$(document).ready() 与window.onload的差别

     近期项目中要做一个消息提醒功能,用户登录完毕后,从右下角滑出一个消息模块,类似qq弹出的广告,只是是在浏览器中的,更大了一些而已。
     開始的做法是在$(document).ready()中使用的是jQuery的slideDown展示消息div,因为页面里面有六七个块是iframe,每一个iframe载入时间都比較长。内容也比較多,结果iframe没载入完,消息div就出来了,并且动画一卡卡的,效果实在无法忍受。
     后来在jQuery官网上的一片文章http://learn.jquery.com/about-jquery/how-jquery-works/发现jQuery的$(document).ready()不是等页面所有载入完再运行的,而是当前页面的dom载入完成后就运行了,这样效率非常高,速度也快。只是要想等页面所有载入完,包含内部的iframe都载入完再运行,就还要使用window.onload事件了,以下说说window.onload和$(document).ready()两者的差别。
     主要是运行时间不同,上面也说了window.onload必须等到页面内包含图片,iframe等全部元素载入完成后才干运行。而$(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成。也就是说运行时可能图片还没完成下载。iframe内容没载入完成等。

     两者的运行时间不同。作用也不同。绝大部分情况下$(document).ready()的作用要好一些,可是要注意的是由于$(document).ready()运行时可能图片等内容没载入完。要想获取图片尺寸这类属性不一定有效。

可是等所有页面都载入完再获取某个图片的尺寸。又浪费了时间,怎么办呢?好在jQuery给我们提供了一个更好的办法,能够使用load方法给指定元素绑定载入完毕时的事件。如$("img").load(function(){……});

     load方法另一个优点。假设单纯的写window.onload注冊事件的话仅仅会运行最后一个,假设要注冊多个。须要额外的代码来推断,而使用jQuery的load方法能够注冊多个事件,$(window).load()和window.onload是等效的,可是load方法能够注冊多个事件。



原文地址:https://www.cnblogs.com/wgwyanfs/p/6843934.html