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

最好的体育网站排行_酒文化网进入



前段光阴钻研了下JS动态加载和履行顺序依附的东东,把LABJS的源码从头扒了下:LABJS浅析。对付JS加载履行以及下载监控这,项目组在这块做的器械不少,但对付CSS加载这块的质量监控,力度就小得多了。缘故原由很简单:JS下载掉败或掉足,这个页面基础就废了。CSS下载掉败,大年夜部分环境下页面照样可用的,虽然会对照臭。

但对付OPA来说,环境可能就完全不合了,CSS文件加载掉败的影响相对就对照大年夜了。

本着生命不息折腾不已的精神,又倒腾了下CSS加载这块的内容,成果如下,鉴于本日晚上11点才放工回家现在已经很困,就直接上代码了,具体阐发后面补上~

删掉落注释空行着实代码很少,关于若何测试、API调用都在开首声清楚明了,demo可下载 附件 :)

/**

* CSS文件加载器,主要功能:动态加载CSS文件,支持加载完成时刻的回调(成功 and 掉败 环境下)* 源码实现借鉴:https://github.com/rgrove/lazyload/commit/6caf58525532ee8046c78a1b026f066bad46d32d

* 更多关于CSS加载的坑的评论争论,见:http://www.phpied.com/when-is-a-stylesheet-really-loaded/*

* 测试措施:1)将文件解压到办事器上(或用fiddler等本地文件调换) 2)造访demo.html即可*

* @example*loadCSS.load('style.css');

*loadCSS.load('style.css', function(){ alert('style.css loaded'); });*loadCSS.load('style.css', function(obj){ alert('age is '+obj.age); }, {age: 24});

*loadCSS.load(['a.css', 'b.css'], function(){ alert('a.css and b.css are all loaded'); });*

* 更多阐明:今朝只能判断CSS文件加载事故是否完成,至于是否呈现404、5XX等,还判断不了* 曲线救国:回调里判断CSS里定义的某个样式是否存在/生效,借此判断CSS是否下载成功,如下

*loadCSS.load('sytle.css', function(){*var div = document.createElement('div');

*div.className = 'pre_defined_class';//pre_defined_class 为测试用的预定义类,假设为 .pre_defined_class{display:none;}*var value = getStyle(div, 'display');

*if(value=='none'){*//成功

*}else{*//掉败

*}*})

** @version 1.0

* @TODO: 1)静态加载的CSS文件的检测(是否成功加载)2)加载设置设置设备摆设摆设项* @author casperchyingp@gmail.com

*http://www.cnblogs.com/chyingp*http://www.zcool.com.cn/u/346408

**/

var LoadCSS = (function () {

//设置设置设备摆设摆设项,未实现var CFG = {

POLL_INTERVAL: 50,MAX_TIME: 10

};

var head = document.head || document.getElementsByTagName('head')[0];var styleSheets = document.styleSheets

var env = getEnv(); //获取用户代理信息,为浏览器差异化加载供给判断依据var queue = []; //CSS加载行列步队

/*@款式1 queue行列步队内元素款式

{urls: ['a.css', 'b.css', 'd.css'],

callback: function(param){},//urls里面所有CSS文件加载完成后的回调措施,可选obj: {age:24} //callback回调措施传入的实参

}*/

function indexOf(arr, ele){var ret = -1;

for(var i=0,len=arr.length; iif(arr[i]==ele) ret = i;

}return ret;

}

/奸淫 @private

* @description 返回用户浏览器代理信息,为判断不合浏览器供给依据* @return {Object} 款式见内部代码

*/function getEnv() {

var ua = navigator.userAgent;var env = {};

(env.webkit = /AppleWebKit\//.test(ua))

|| (env.ie = /MSIE/.test(ua))|| (env.opera = /Opera/.test(ua))

|| (env.gecko = /Gecko\//.test(ua))|| (env.unknown = true);

return env;

}

/奸淫 @private

* @description gecko内核的浏览器轮询检测措施* 参考:http:/最好的体育网站排行/www.zachleat.com/web/2010/07/29/load-css-dynamically/

* @param {HTMLElement} node style节点,node.nodeName == 'STYLE'* @param {Object} queueObj 见@款式1

*/function pollGecko(node, queueObj) {

try {

node.sheet.cssRules;

} catch (ex) {

node.pollCount++;

if (node.pollCount

setTimeout(function () {pollGecko(node, queueObj);

}, 50);

} else {

finishLoading(node.href, queueObj);//用不用略做些延迟,防止神一样的衬着问题??

}

return;}

finishLoading(node.href, queueObj);

}

/**

* @private* @description webkit内核的浏览器轮询检测措施

* @param {HTMLElement} node link节点,node.nodeName == 'LINK'* @param {Object} queueObj 见@款式1

*/function pollWebKit(node, queueObj) {

for(var i=styleSheets.length; i>0; i--){

if(styleSheets[i-1].href===node.href){

finishLoading(node.href, queueObj);return;

}}

node.pollCount++; //轮询次数加1

if (node.pollCount

setTimeout(function(){pollWebKit(node, queueObj);

}, 50);} else {

finishLoading(node.href, queueObj);}

}

function checkSucc(className, attr, value){var div = document.createElement('div');

div.style.cssText += 'height:0; line-height:0; visibility:hidden;';div.className = className;

document.bo最好的体育网站排行dy.appendChild(div);

return getComputedStyle(div, attr)==value;}

/**

* @description 获取节点样式值——只能获取对照简单的样式的值,一些兼容性问题不是重点,在这里不做处置惩罚,有兴趣可以看下jquery源码* @param {HTMLElement} node dom节点

* @param {String} attr 样式名字,如display、visibility等*/

function getComputedStyle(node, attr){var getComputedStyle = window.getComputedStyle;

if(getComputedStyle){return getComputedStyle(node, null)[attr];

}else if(node.currentStyle){return node.currentStyle[attr];

}else{return node.style[attr];

}}

/**

* @private* @description url对应的CSS文件加载完成时的回调(404也包括在内)

* @param {String} url CSS文件的url* @param {Object} queueObj 见@款式1

*/function finishLoading(url, queueObj){

var index = indexOf(queueObj.urls, url);queueObj.urls.splice(index, 1);

if(!queueObj.urls.length){

queueObj.callback(queueObj.obj);

index 最好的体育网站排行= indexOf(queue, queueObj);queue.splice(index, 1);

}}

/**

* @description 加载CSS的措施* @param {Array} urls 加载的CSS文件名行列步队

* @param {Function} [callback] CSS文件行列步队整个加载完的回调* @param {Object} obj callback的参数

* @param {Object} context* @return {Undefined}

*/function loadCSS(urls, callback, obj) {

var queueObj = {urls: urls,

callback: callback,obj: obj

}queue.push(queueObj);

var pendingUrls = queueObj.urls;

for (var i = 0, len = pendingUrls.len最好的体育网站排行gth; i

var url = pendingUrls[i];var node ;

if(env.gecko){node = document.createElement('style');

}else{node = document.createElement('link');

node.rel = 'stylesheet';node.href = url;

}//node.setAttribute('charset', 'utf-8');//设不设置有木有影响,持保留立场

if (env.gecko || env.webkit) {//老版本webkit、gecko不支持onload

node.pollCount = 0;

queueObj.urls[i] = node.href; //轮询判断的时刻用到,由于不合浏览器里面取到的node.href值会不一样,有的只有文件名,有的是完备文件名?(相对路径、绝对路径)

if (env.webkit) {//之以是要用轮询,后面评论争论,@TODO: 新版本的webkit已经支持onload、onerror,优化下?

pollWebKit(node, queueObj);

} else {

node.innerHTML = '@import "' + url + '";';//为什么这样做,猛点击这里:http://www.phpied.com/when-is-a-stylesheet-really-loaded/pollGecko(node, queueObj);

}

} else {

node.onload = node.onerror = function(){finishLoading(this.href, queueObj);

};}

head.appendChild(node);

}}

//---------------------- 对外接口!---------------------------

return {

/奸淫 @description 加载CSS文件

* 斟酌:成功回调,差错回调分开?*最好的体育网站排行 @param {Array|String} urls 要加载的CSS文件的文件名(相对路径,或绝对路径),比如:'style.css', ['style.css', 'test.css']

* @param {Function} [callback] 可选:文件加载完成后的回调(成功;或掉败,如404、500等)* @param {Object} [obj] 可选:回调履行时传入的参数

*/load: function (urls, callback, obj) {

loadCSS([].concat(urls), callback || function(){}, obj || {});}

};

})();

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

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