CSS文件動態加載

前段時間研究了下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 casper  [e-mail] 
 *                 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; i<len; i++){
      if(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 < 200) {

        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 < 200) {
      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.body.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.length; i < len; ++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 || {});
    }

  };
})();

 >>>我是附件，趕緊猛點擊