您的位置:首页 > 其它

跨浏览器的ready函数的实现,主要采用DOMContentLoaded事件

2011-11-17 00:33 393 查看
DOMContentLoaded事件在大多数情况下去替代window.onload事件,因为window.onload事件必须要等待页面所有元素都下载完后才执行。而DOMContentLoaded事件是在DOM树建成时触发,因此要比onload事件快得多,它是W3C推荐的标准事件。ff,opera已经支持该事件,但IE8还都不支持。因此IE要采用doScroll事件来实现ready,原理是doScroll要在DOM树形成后才能操作。

在IE的情况下,用doScroll事件来判断:
<script type="text/javascript">
//<![CDATA[
var fireDOMReadyEvent = function(){
window.clearInterval(timer);
alert('DOM content loaded');

if (!!window.ActiveXObject && window == top){ //也有人用 document.attachEvent 来判断是IE的,问题:如果这个页面是嵌在frame中的,如何使用ready呢?
var timer = null;
timer = setInterval(function(){
try{
document.documentElement.doScroll('left');
fireDOMReadyEvent();
}catch(e){};
});
}
}
//]]>
</script>

跨浏览器的方案:
// Mozilla,opera,webkit 支持DOMContentLoaded事件
if(docuemnt.addEventListener && !jQuery.browser.opera)
//直接使用事件回调即可
document.addEventListener('DOMContentLoaded',xxx,false);
//如果是IE并且不是嵌在frame中就需要不断检测文档是否加载完毕
if(!!window.ActiveXObject && window == top ){
(function(){
try{
document.documentElement.doScroll("left");
}catch(error){
setTimeout(arguments.callee,0);
return;
}
//在这里可以调用等待运行的函数
})();
}
//opera的DOMContentLoaded事件发生后,其css也是是还不能完全可用的,所以要特殊处理,就是判断每个css的tag都是不是可用了
if(/(opera)(?:.*version)?[ \/]([\w.]+)/i.test(navigator.userAgent)){
document.addEventListener("DOMContentLoader",function(){
for (var i = 0;i<document.styleSheets.length;i++){
if(document.styleSheet.disabled){
setTimeout(argument.callee,0);
return;
}
//在这里可以调用等待运行的函数
}
},false);
}
//safari中document.readyState的状态为loaded或complete时,css文件引入还未能确定是不是解析完了的,所以要判断其css文件数目
if(/WebKit/i.test(navigator.userAgent)){
var numStyles;
(function(){
if(document.readyState != "loaded" && document.readyState != "complete"){
setTimeout(argument.callee,0);
return;
}
if(numStyles === undefined){
numStyles = jQuery("style,link[rel=stylesheet]").length;
}
if(document.styleSheets.length != numStyles){
setTimeout(argument.callee,0);
return;
}
//在这里可以调用等待运行的函数
})();

//最后,如果上面的hack都不支持的话,就用onload事件
window.onload = function(){
//在这里可以调用等待运行的函数
}
}

参考:
http://blog.pchome.net/article/list_5670316_17126_1.html?showAll=1
http://www.pin5i.com/showtopic-26225.html
http://www.never-online.net/blog/article.asp?id=230
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: