快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

亚博老虎机娱乐官网国际_酒文化网进入



上篇文章《Javascript动态加载CSS文件实例》中,我们提到了在动态加载CSS文件的时刻,若何检测加载是否完成。留意,这里的加载完成包孕了两种环境:

1)加载成功  2)加载掉败

也便是说,这里并没有将成功与掉败的环境区分开来。看到这里你可能疑心了,就动态加载个CSS文件,洋洋洒洒写了一两百行代码,连是否加载成功/掉败都没能区分开来,这彷佛有些弗成理解。

美好的假象——若何判断CSS加载完成

这里先不抛出结论,而是先思虑一个问题:若何动态加载CSS文件?

很简单,就下面几行代码:

var node = document.createElement('link');

node.rel = 'stylesheet'; node.hr亚博老虎机娱乐官网国际ef = 'style.css';

document.getElementsByTagName('head')[0].appendChild(node);

很好,那么接下来的问题是:怎么判断CSS文件是否加载完成?

那还不简单,几行代码就搞定的工作,前真个老同伙onload、onerror闪亮登场:

var node = document.createElement('link');

node.rel = 'stylesheet'; node.type = 'text/css';

node.href = 'style.css'; node.onload = function(){

alert('加载成功啦!'); };

node.onerror = function(){alert('加载掉败啦!');

}; document.getElementsByTagName('head')[0].appendChild(node);

嗯,这么写是没错。。。从理论上。。。看下HTML 5里关于资本加载完成的描述,概括起来便是:

CSS文件加载成功,在link节点上触发load事故

CSS文件加载掉败,在link节点上触发error事故

Once the attempts to obtain the resource and its critical subresources are complete, the user agent must, if the loads were successful, queue a task to fire a simple event named load at the link element, or, if the resource or one of its critical subresources failed to completely load for any reason (e.g. DNS error, HTTP 404 response, a connection being prematurely closed, unsupported Content-Type), queue a task to fire a simple event named error at the linkelement. Non-network errors in processing the resource or its subresources (e.g. CSS parse errors, PNG decoding errors) are not fai亚博老虎机娱乐官网国际lures for the purposes of this paragraph.

看上去很美好的样子。我们知道,这个天下从来都不完美,至少对付前端来说,这个天下跟完美这个词没半毛钱关系。JS中不停为人诟病的语法,浏览器糟糕的兼容性问题神马的。将上面那段代码放到IE(版本9及以下,10没有测过)里面,将文件链接指向一个不存在的文件,比如在fiddler里将返回调换成404:

var node = document.createElement('link');

node.href = 'none_exist_file.css';  //其他属性设置省略 node.onload = function(){

alert('加载成功啦!'); };

node.onerror = function(){alert('加载掉败啦!');

}; document.getElementsByTagName('head')[0].appendChild(node);

于是你看到一句富丽丽的提示:

“加载成功啦!”

看到这里是不是对这个天下孕育发生了深深的狐疑——我承认我当时把微软开拓IE浏览器的兄弟们合家都问候了一下。

好吧,这篇文章并不是关于IE的吐槽文,在CSS文件加载状态的检测这个问题上,IE的体现虽不完美,但比拟之下还不算分外糟糕。

慢着!意思是——还有更糟糕的?是的,比如早期版本的firefox,连onload都不支持。

若何判断CSS文件加载完成——五种规划

抛开统统的埋怨与不满,按照过往的履历,若何判断一个文件是否加载完成?一样平常有以下几种要领:

监听link.load

监听link.addEventListener('load', loadHandler, false);

监听link.onreadystatechange

监听document.styleSheets的变更

经由过程setTimeout准时反省你预先创建好的标签的样式是否发生变更(该标签付与了在动态加载亚博老虎机娱乐官网国际的CSS文件里才声明的样式)

示例代码如下:

//规整洁

link.onload = function(){alert('CSS onload!');

}

//规划二 link.addEventListener('load', function(){

alert('addEventListener loaded !'); }, false);

//规划三

link.onreadystatechange = function(){var readyState = this.readyState;

if(readyState=='complete' || readyState=='loaded'){alert('readystatechange loaded !');

} };

//规划四 var curCSSNum = document.styleSheets.length;

var timer = setInterval(function(){if(document.styleSheets.length>curCSSNum){

//留意:当你一次性加载很多文件的时刻,必要判断究竟是哪个文件加载完成了alert('document.styleSheets loaded !');

clearInterval(timer);}

}, 50);

var div = document.createElement('div'); div.className = 'pre_defined_class';//加载的CSS文件里才有的样式

var timer = setTimeout(function(){//假设getStyle措施的感化:获取标签特点样式的值

if(getStyle(div, 'display')=='none'){alert('setTimeout check style loaded !');

return;}

setTimeout(arguments.callee, 50);//继承反省 }, 50);

五种规划的实际测试结果

实际测试的结果若何呢?如下:

浏览器

反省onload(onload/addEventListener)

link.onreadystatechange

反省document.styleSheets.length

反省特定标签的样亚博老虎机娱乐官网国际式

IE

ok,但404等环境也会触发onload

可行,但404等环境下readyState

也为complete或loaded

测试结果与网上说的不同等

需再加验证

ok

chrome

1、老版本:not ok

2、新版本:ok(如24.0)

not ok

ok(文件加载完成后才改变length)

ok

firefox

1、老版本:not ok(3.X)

2、新版本:ok(如16.0)

not ok

not ok(节点插入时,length就改变)

ok

safari

1、老版本:not ok(?)

2、新版本:ok(如6.0)

not ok

ok(文件加载完成后才改变length)

ok

opera

ok

not ok

not ok(节点插入时,length就改变)

ok

规整洁、规划二本色上是一样的;而假如可能的话,stoyan建议尽可能不用规划五,缘故原由如下:

1)机能开销(规划四也好不到哪去)

2)需添加额外无用样式,必要对CSS文件有足够的节制权(CSS文件可能并不是自己的团队在掩护)

那好,暂时将规划五扫除在外(着实兼容性是最好的),从上表格可以知道,各浏览器分手可采纳规划如下:

浏览器

可采纳规划

IE

规整洁、规划二、规划三

chrome

规划四

firefox

safari

规划四

opera

规整洁、二

firefox竟然。。。霎光阴心坎万千只草泥马在欢快地奔跑。。。对付firefox,stoyan大年夜神也考试测验了其他要领,比如:

1、MozAfterPaint(这是神马还没查,总之掉败了,求指示~)

2、document.styleSheets[n].cssRules,只有当CSS文件加载下来的时刻,document.styleSheets[n].cssRules才会发生变更;然则,因为ff 3.5的安然限定,假如CSS文件跨域的话,JS造访document.styleSheets[n].cssRules会掉足

何在老版本的firefox里判断CSS是否加载完成

就在stoyan大年夜神即将扫兴之际,Zach Leatherman 童鞋发清楚明了firefox下的办理规划:

you create a style element, not a link

add @import "URL"

poll for access to that style node's cssRules collection

这个规划使用了上面提到的第二点,同时办理了跨域的问题。代码如下(代码引用自原文):

var style = document.createElement('style');

style.textContent = '@import "' + url + '"';

var fi = setInterval(function() {try {

style.sheet.cssRules; //CSSDone('listening to @import-ed cssRules');

clearInterval(fi);} catch (e){}

}, 10);

head.appendChild(style);

根据stoyan、Zach的思路, Ryan Grove 在LazyLoad里将实现,有兴趣的可以看下 源代码

Ryan Grove的代码有些小问题,比如:

1、CSS文件的壅闭式加载,比如加载A.css、B.css,必要等A.css加载完了,才开始加载B.css

2、某些判断语句的掉误,导致CSS文件纪录成功的环境下,检测掉误(见pollWebkit措施第一个while轮回)

只管如斯,照样要谢谢Ryan的劳动(撒花),LZ根据实际必要,将LazyLoad里js加载部分的代码剔除,并上面提到的两个对照显着的bug fix了,改动后的源码以及demo可拜见《CSS文件动态加载》一文 :)

若何判断CSS文件加载掉败

不停到这里,我们终于办理了若何检测CSS文件是否加载完成的问题。 接下来又有一个严酷的问题摆在我们眼前:若何判断一个文件加载掉败?

不要忘了onerror童鞋!onerror的支持环境若何呢?—— 实际测试了下,环境并不乐不雅,直接引用先进的劳动结晶,原文链接如下:http://seajs.org/tests/research/load-js-css/test.html

css:

Chrome / Safari:

- WebKit >= 535.23 后支持 onload / onerror

- 之前的版本无任何事故触发

Firefox:

- Firefox >= 9.0 后支持 onload / onerror

- 之前的版本无任何事故触发

Opera:

- 会触发 onload

- 但 css 404 时,不会触发 onerror

IE6-8:

- 下载成功和掉败时都邑触发 onload 和 onreadystatechange,无 onerror

IE9:

- 同 IE6-8

-亚博老虎机娱乐官网国际 onreadystatechange 会重复触发

办理规划:

- Old WebKit 和 Old Firefox 下,用 poll 措施:load-css.html

- 其他浏览器用 onload / onerror

不够:

- Opera 下假如 404,没有任何事故触发,有可能导致依附该 css 的模块不停处于等待状态

- IE6-8 下区分不出 onerror

- poll 探测难以区分出 onerror

可见,之前的规划,并不能完美办理“判断CSS文件加载掉败”这个问题(相称令人沮丧,有主见的童鞋切切要留言奉告我 TAT)

今朝有两种思路,着实并没有完全办理问题:

1、超时掉败鉴定:设定t值,当加载光阴跨越t时,认定其加载掉败(简单粗暴,今朝采纳要领)

2、鉴定加载完成后,经由过程上面的规划五(反省样式),判断CSS文件是否加载掉败 —— 条件是没有被认定为“超时掉败”

多方就教后,外部门的同事tom供给了一个不错的的思路,该实现规划已经有线上项目作为实践支撑:JSONP

CSS加载掉败判断——不一样的思路JSONP

假设有style.css(实际想要加载的文件)、style.js;style.js里是个回调措施CSSLoadedCallback,CSSLoadedCallback做两件工作

1)打标记,标识style.js加载成功(即页面拿到了style.css里的样式字符串)

2)创建link标签,并将CSSLoadedCallback里传入的样式字符串写到link标签里

style.js里的代码大年夜致如下:

//第一个参数style.css为实际想要加载的CSS的文件名

//第二个参数:style.css里的样式

CSSLoadedCallback("style.css", ".hide{display:'none';} .title{font-size:14px;}");

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: