跨浏览器的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
在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
相关文章推荐
- 主流框架中DOMContentLoaded事件的实现(转)
- 主流框架中DOMContentLoaded事件的实现
- 主流框架中DOMContentLoaded事件的实现
- 主流框架中DOMContentLoaded事件的实现
- 转-流框架中DOMContentLoaded事件的实现
- 检测浏览器是否支持DOM2级规定的HTML事件
- 解决跨浏览器DOM事件处理
- 各浏览器对 onunload 事件的支持与触发条件实现有差异
- avascript计算器之DOM事件模型-----浏览器兼容问题
- JQuery采用CSS实现DOM元素的显示和隐藏
- 怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
- javascript计算器之DOM事件模型-----浏览器兼容问题
- 使用Modernizr+HTML-DOM实现placeholder兼容低版本浏览器
- JS浏览器滚轮事件实现横向滚动照片展
- javascript计算器之DOM事件模型-----浏览器兼容问题
- 【HTML5】DOMContentLoaded事件
- 关于浏览器右键禁用事件,浏览器采用自己的右键事件。
- 页面操作全部采用调用函数方法实现(包括监听事件)
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- HTML5-常见的事件- DOMContentLoaded事件