判断js和css是否加载完成

在通过ajax或者src动态获取js、css文件的时候，我们常常需要判断文件是否加载完成，以便进行进一步的操作，但是在检测js、css文件是否已经加载的策略上各浏览器并不统一，有很多坑，现在在这里总结一下

css

判断CSS是否加载完成

1、在head标签内插入 引入css的link标签
2、如果是ie浏览器直接使用onload事件 其它浏览器用setTimeout循环轮询判断下面属性
3、如果是webkit内核判断 link节点上的sheet属性
4、其它浏览器判断节点上的sheet.cssRules属性

上代码

 1 function loadCss(src, fn) {
 2     var node = document.createElement('link');
 3     node.rel = 'stylesheet';
 4     node.href = src;
 5     
 6     document.head.insertBefore(node, document.head.firstChild);
 7     
 8     if (node.attachEvent) {//IE
 9         node.attachEvent('onload', function () {
10             fn(null, node)
11         });
12     } else {//other browser
13         setTimeout(function () {
14             poll(node, fn);
15         }, 0);
16     }
17     function poll(node, callback) {
18         var isLoaded = false;
19         if (/webkit/i.test(navigator.userAgent)) {//webkit
20             if (node['sheet']) {
21                 isLoaded = true;
22             }
23         } else if (node['sheet']) {// for Firefox
24             try {
25                 if (node['sheet'].cssRules) {
26                     isLoaded = true;
27                 }
28             } catch (ex) {
29                 // NS_ERROR_DOM_SECURITY_ERR
30                 if (ex.code === 1000) {
31                     isLoaded = true;
32                 }
33             }
34         }
35         if (isLoaded) {
36             setTimeout(function () {
37                 callback(null, node);
38             }, 1);
39         } else {
40             setTimeout(function () {
41                 poll(node, callback);
42             }, 10);
43         }
44     }
45 
46     node.onLoad = function () {
47         fn(null, node);
48     }
49 }

js文件加载

 1 function loadScript(src, fn) {
 2     var node = document.createElement("script");
 3     node.setAttribute('async', 'async');
 4     var timeID;
 5     var supportLoad = "onload" in node ;
 6     var loadEvent = supportLoad ? "onload" : "onreadystatechange";
 7     node[loadEvent] = function onLoad() {
 8         if (!supportLoad && !timeID && /complete|loaded/.test(node.readyState)) {
 9             timeID = setTimeout(onLoad);
10             return;
11         }
12         if (supportLoad || timeID) {
13             clearTimeout(timeID);
14             fn(null, node);
15         }
16     };
17     document.head.insertBefore(node, document.head.firstChild);
18     node.src = src;
19     node.onerror = function (e) {
20         fn(e);
21     };
22 }

 

posted @ 2016-04-26 21:26  风信子578  阅读(677)  评论(0)  编辑  收藏  举报