JavaScript如何判断 CSS 文件加载是否完毕?

2011-02-06 09:08:46

7 Answers

使用settimeout循环判断不同浏览器中当CSS加载完或失败时的特性,当加载成功时则停止

在js中我们可以在DOM树生成后使用js检测link节点的sheet来获取CSSStyleSheet对象,通过该对象的cssRules属性来判断css是否加载成功,不过sheet属性有一些兼容问题需要处理,各浏览器判断的原理: 

Chrome / Safari:
    linkNode.sheet 在 css 文件下载完成并解析好后才有值,之前为 undefined
    linkNode.sheet.cssRules 同域时返回 CSSRuleList, 跨域时返回 null

    chrome还是不一样

  Firefox:
    linkNode.sheet 在 css 插入 DOM 中后立刻有值,插入前为 undefined
    linkNode.sheet.cssRules 在文件还未下好时,抛出 NS_ERROR_DOM_INVALID_ACCESS_ERR
                            在文件下载并解析好后,
                              同域时返回 cssRuleList
                              只要是跨域(不管对错)抛出 NS_ERROR_DOM_SECURITY_ERR

  IE6-9 / Opera:
    linkNode.sheet 和 cssRules 在 css 插入 DOM 后都立刻可访问,cssRules 为 []
    当文件下载完成时,cssRules 为 cssRuleList
    IE 下,无论成功失败,都会触发 onload
    Opera 只在成功时才触发 onload,跨域时访问cssRules 会抛异常。

  缺陷:Opera 遇到 404 时,需要降级到 timeout

根据原理可以写出如下函数:

  
function isCssLoaded(link) { try { if (link.sheet && link.sheet.cssRules.length > 0) return true; else if (link.styleSheet && link.styleSheet.cssText.length > 0) return true; else if (link.innerHTML && link.innerHTML.length > 0) return true; } catch (ex) { //FF下的判断跨域,也不行,路径错了还是抛这个异常, //在发生此异常时,我们默认css加载成功 if (ex.name && ex.name == 'NS_ERROR_DOM_SECURITY_ERR') return true; } return false; }
2011-02-06 10:53:00

看了一下seajs源码,它基本上是这样实现的:

  
<script type="text/javascript"> function styleOnload(node, callback) { if (node.attachEvent) { node.attachEvent('onload', callback); } else { setTimeout(function() { poll(node, callback); }, 0); } } function poll(node, callback) { if (callback.isCalled) { return; } var isLoaded = false; if (/webkit/i.test(navigator.userAgent)) {//webkit if (node['sheet']) { isLoaded = true; } }else if (node['sheet']) { try { if (node['sheet'].cssRules) { isLoaded = true; } } catch (ex) { if (ex.code === 1000) { isLoaded = true; } } } if (isLoaded) { 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>
2011-02-06 12:25:54

好的方法没有想到,不过可以采用一个迂回的办法:

就是在css里面定义一个样式设置,例如 #cssIsLoaded{width: 1px},然后用JavaScript创建一个隐藏的div,并且将这个DIV的值设置成cssIsLoaded,最后通过setInterval定时检测这个div的宽度度是否变成了1px,如果是,则已经加载成功了。

期待高手的解答。

2011-02-06 13:52:50

我们可以在DOM树生成后使用js检测link节点的sheet来获取CSSStyleSheet对象,通过该对象的cssRules属性来判断css是否加载成功,由于各个浏览器的实现不同,sheet属性有一些兼容问题需要处理。
具体怎么做,google一下,答案很多。

2011-02-06 15:58:34

其实onerror事件是很好的监听方法,但是由于link标签不支持onerror,我们可以同时创建link和img两个标签并将CSS的URL同时赋于两个标签,用img标签的onerror事件做为监听器迂回判断css的加载,这算是比较偏离的方法。

2011-02-06 17:31:36

EventUtil.addHandler(window,"load",function(){
var link=document.createElement("link");
link.type="text/css";
link.rel="stylesheet";
EventUtil.addHandler(link,"readystatechange",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(target.readyState=='loaded' ||target.readyState=='complete"){
EventUtil.removeHandler(target,"readystatechange",arguments.callee);
alert("CSS loaded");

}
})

})
为新创建的<script>或<link>节点指定一个事件处理程序,事件的目标是该节点本身,因此当触发readystatechange事件时,要检测目标的readyState属性是不是等于"loaded"或"complete",如果进入其中任何一个阶段,要移除事件处理程序(以防被执行两次),这时就算加载了.
以上为<javascript高级程序设计>作者的说法

2011-02-06 19:27:49
您不能回答该问题或者回答已经关闭!

相关文章推荐

  • C#中using指令的几种用法

    using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到

  • C#实例解析适配器设计模式

    将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够一起工作

  • C#开发高性能Log Help类设计开发

    项目中要在操作数据库的异常处理中加入写Log日志,对于商业上有要求,写log时对其它操作尽可能影响小,不能因为加入log导致耗时太多

  • C#运行时相互关系

    C#运行时相互关系,包括运行时类型、对象、线程栈和托管堆之间的相互关系,静态方法、实例方法和虚方法的区别等等

  • C#协变和逆变

    “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型,“逆变”则是指能够使用派生程度更小的类型

  • 使用托管C++粘合C#和C++代码(二)

    本文实现一下C++代码调用C#代码的过程。我构造一个简单并且直观的例子:通过C++ UI 触发C# UI.

  • C#开发中的反射机制

    反射的定义:审查元数据并收集关于它的类型信息的能力。元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等

  • C#基础概念之延迟加载

    延迟加载(lazy load)是Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作

  • 使用托管C++粘合C#和C++代码(一)

    C#在xml读写,数据库操纵,界面构造等很多方面性能卓越;C++的效率高,是底层开发的必备武器

  • C#中的索引器的简单理解和用法

    C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对数组或集合成员的存取操作

  • Async和Await使异步编程更简单

    C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作

  • 深入C# 序列化(Serialize)、反序列化(Deserialize)

    C#中的序列化和反序列化,序列化是.NET运行时环境用来支持用户定义类型的流化的机制