我是FE,也是Fe

前端来源于不断的点滴积累。我一直在努力。

统计

留言簿(15)

阅读排行榜

评论排行榜

如何判断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

(完)





posted on 2011-10-08 11:44 衡锋 阅读(1823) 评论(5)  编辑  收藏 所属分类: Web开发

评论

# re: 如何判断link标签css文件加载完毕 2012-01-31 10:25 黑梦

node.sheet.cssRules
测试不成功 FF 下无论如何 不行
谷歌下无论如何 行

这个是不行  回复  更多评论   

# re: 如何判断link标签css文件加载完毕 2012-01-31 10:35 黑梦

@黑梦

onerror 事件在谷歌中有响应。。。。  回复  更多评论   

# re: 如何判断link标签css文件加载完毕 2012-01-31 11:15 黑梦

查了一些资料 看来上面的代码还是靠谱的
就是浏览器本身对这块的支持有问题。。。
跨域 在浏览器的安全方案上是最大的麻烦了
404 确实应该是在开发时就搞定的
  回复  更多评论   

# re: 如何判断link标签css文件加载完毕 2012-02-06 18:57 衡锋

@黑梦
我试了一下,FF也可以。  回复  更多评论   

# re: 如何判断link标签css文件加载完毕 2012-04-16 11:33 tb

恩 不错的   回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: