如何判断link标签css文件加载完毕

发布时间:2016-12-8 4:15:44 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"如何判断link标签css文件加载完毕",主要涉及到如何判断link标签css文件加载完毕方面的内容,对于如何判断link标签css文件加载完毕感兴趣的同学可以参考一下。

动态加载css都是通过DOM操作新增一个link标签来实现,常见的代码如下:     var node = document.createElement("link");     node.setAttribute("rel","stylesheet");     node.setAttribute("type","text/css");     node.setAttribute("href","xx.css");     document.body.appendChild(node); 但是要判断这个css文件是否加载完毕,各个浏览器的做法差异比较大,今天在读seajs 源代码时想到里面应该能找到我想要的代码,下面是改编自seajs中的源码:     <script type="text/javascript"> function styleOnload(node, callback) {     // for IE6-9 and Opera     if (node.attachEvent) {       node.attachEvent('onload', callback);       // NOTICE:       // 1. "onload" will be fired in IE6-9 when the file is 404, but in       // this situation, Opera does nothing, so fallback to timeout.       // 2. "onerror" doesn't fire in any browsers!     }     // polling for Firefox, Chrome, Safari     else {       setTimeout(function() {         poll(node, callback);       }, 0); // for cache     }   }   function poll(node, callback) {     if (callback.isCalled) {       return;     }     var isLoaded = false;     if (/webkit/i.test(navigator.userAgent)) {//webkit       if (node['sheet']) {         isLoaded = true;       }     }     // for Firefox     else if (node['sheet']) {       try {         if (node['sheet'].cssRules) {           isLoaded = true;         }       } catch (ex) {         // NS_ERROR_DOM_SECURITY_ERR         if (ex.code === 1000) {           isLoaded = true;         }       }     }     if (isLoaded) {       // give time to render.       setTimeout(function() {         callback();       }, 1);     }     else {       setTimeout(function() {         poll(node, callback);       }, 1);     }   }   function loadcss(){     var node = document.createElement("link");     node.setAttribute("rel","stylesheet");     node.setAttribute("type","text/css");     node.setAttribute("href","xx.css");     document.body.appendChild(node);     styleOnload(node,function(){         alert("loaded");     });   }     </script> 单靠onload事件是不解决问题的。FF,webkit可以通过node.sheet.cssRules属性是否存在来判断是否加载完毕,IE6-9以及opera可以利用onload。其他浏览器需要通过定时任务来判断是否加载完毕。 照着这个思路,推荐大家去读读jQuery源码,domready事件的判断,原理也类似,每个浏览器的处理细节不一样。 seajs源码:http://modules.seajs.com/seajs/1.0.1/sea-debug.js

上一篇:eclipse如何修改android的application name
下一篇:线段树+树状数组整理

相关文章

相关评论