码迷,mamicode.com
首页 > 其他好文 > 详细

模拟DOMContentLoaded事件

时间:2014-08-12 00:05:13      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   os   io   文件   ar   cti   

window.load事件

文档中所有图片,脚本,链接以及子框完成加载后,才会触发window.onload事件。

浏览器兼容性:All

DOMContentLoaded事件

当页面中的文档树解析完成时,Document会触发DOMContentLoaded事件。此时,页面引用的样式表和图像文件,以及包含的框架页面可能还没有加载完成。

浏览器兼容性:Chrome 0.2+ , Firefox 1.0+, IE9+, Opera 9.0+, Safari 3.1+

模拟DOMContentLoaded

用户可等不及,文档全部加载完才可以与页面交互,这样的交互体验也是极差的,那对于不支持DOMContentLoaded的浏览器,我们只能来模拟了!

第一种方案:

 1 /*
 2 document.readyState 四种状态
 3 
 4 uninitialized: 尚未开始加载
 5 loading: 正在加载
 6 interactive: 已加载了必需内容
 7 complete: 文档加载完成
 8 */
 9 function DomContentLoaded(){
10     if(document.readyState === ‘complete‘){
11         document.detachEvent("onreadystatechange", DOMContentLoaded);
12         //DOMContentLoaded触发,执行绑定的事件
13     }
14 };
15 
16 document.attatchEvent("onreadystatechange", DOMContentLoaded);

 

第二种方案:

 1 /*
 2 当前页面如果是顶层窗口,可以每隔1ms模拟点击滚动条,直到不再抛出异常
 3 判断页面是否包含在firame中的方法:
 4 if(window.self === window.top){
 5     //当前页面是父页面
 6 }
 7 下面是jQuery的判断方法,又学会了一招(●‘?‘●)
 8 */
 9 var toplevel = false;
10 try{
11     //判断当前页面是否包含在iframe中
12     topleve = window.iframeElement == null;
13 }catch(e){}
14 
15 function doScrollCheck(){
16     try{
17         document.documentElement.doScroll(‘left‘);
18     }catch(e){
19         setTimeout(doScrollCheck, 1);
20     }
21 }
22 if(document.documentElement.doScroll && toplevel){
23     doScrollCheck();
24 }

 

当页面内容较多或包含iframe时,模拟滚动条点击会比onreadystatechange先触发,因此jQuery 1.7.1中,结合了这两种方法来模拟DOMContentLoaded事件。

模拟DOMContentLoaded事件,布布扣,bubuko.com

模拟DOMContentLoaded事件

标签:style   blog   color   os   io   文件   ar   cti   

原文地址:http://www.cnblogs.com/zhouwenhong/p/3905744.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!