判断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属性

上代码

 function loadCss(src, fn) {
     var node = document.createElement('link');
     node.rel = 'stylesheet';
     node.href = src;

     document.head.insertBefore(node, document.head.firstChild);

     if (node.attachEvent) {//IE
         node.attachEvent('onload', function () {
             fn(null, node)
         });
     } else {//other browser
         setTimeout(function () {
             poll(node, fn);
         }, 0);
     }
     function poll(node, callback) {
         var isLoaded = false;
         if (/webkit/i.test(navigator.userAgent)) {//webkit
             if (node['sheet']) {
                 isLoaded = true;
             }
         } else if (node['sheet']) {// for Firefox
             try {
                 if (node['sheet'].cssRules) {
                     isLoaded = true;
                 }
             } catch (ex) {
                 // NS_ERROR_DOM_SECURITY_ERR
                 if (ex.code === 1000) {
                     isLoaded = true;
                 }
             }
         }
         if (isLoaded) {
             setTimeout(function () {
                 callback(null, node);
             }, 1);
         } else {
             setTimeout(function () {
                 poll(node, callback);
             }, 10);
         }
     }

     node.onLoad = function () {
         fn(null, node);
     }
 }

js文件加载

 function loadScript(src, fn) {
     var node = document.createElement("script");
     node.setAttribute('async', 'async');
     var timeID;
     var supportLoad = "onload" in node ;
     var loadEvent = supportLoad ? "onload" : "onreadystatechange";
     node[loadEvent] = function onLoad() {
         if (!supportLoad && !timeID && /complete|loaded/.test(node.readyState)) {
             timeID = setTimeout(onLoad);
             return;
         }
         if (supportLoad || timeID) {
             clearTimeout(timeID);
             fn(null, node);
         }
     };
     document.head.insertBefore(node, document.head.firstChild);
     node.src = src;
     node.onerror = function (e) {
         fn(e);
     };
 }