首页 > 代码库 > 模拟DOMContentLoaded事件
模拟DOMContentLoaded事件
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事件。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。