Js判斷CSS檔案載入完畢的具體實作_javascript技巧

要判斷這個CSS 檔案是否載入完畢，各個瀏覽器的做法差異比較大，這次要說IE瀏覽器做的不錯，我們可以直接透過onload方法來處理CSS載入完成以後的處理：

複製程式碼 程式碼如下:

// 尺寸節選至seajs
function style(node) ) {
    // for IE6-9 及 Opera
    if (node.attachEvent) {
      node.attach('onload). . "onload" will be fired in IE6-9 when the file is 404, but in
      // this situation, Opera does nothing, so fallback to timeout.
 in any browsers!
    }
}

很遺憾，這次在其他的瀏覽器中，想判斷CSS是否載入完成就不是那麼方便了，FF,webkit可以透過node.sheet.cssRules屬性是否存在來判斷是否載入完畢。而且需要使用setTimeout間隔事件輪詢：

複製程式碼 程式碼如下:

// 程式碼節選至seajs

function poll(node, callback) {
    if (callback.isCalled) {
      return;
 webkit/i .test(navigator.userAgent)) {//webkit
      if (node['sheet']) {
         
else if (node['sheet']) {
      try {
        if (node['sheet'].cs    }
      } catch (ex) {
        // NS_ERROR_DOM_SECURITY_ERR
       if (ex.code === 1000) {      }
    }
    if (isLoaded) {
      // give time to render.
      setTimeout(function() {
        callback();      setTimeout(function() {
        poll(node, callback);
      }, 1);
    }
  }

    }
  }

🎜 >}, 0);



SeaJS給出的完整的處理是這樣的：




複製程式碼


程式碼如下:

function styleOnload(node, callback) {
    // 對於IE6-9 和Opera
    if (node.attachEvent) {
   🎜>      // 注意：
      // 1. 當文件為404 時，「onload」會在IE6-9 中觸發，但在
      // 這種情況下，Opera 不執行任何操作，因此回執行任何操作，因此回情況退到超時。
      // 2. “onerror”不會在任何瀏覽器中觸發！
    }
    // 輪詢Firefox、Chrome、Safari
    else {
          }, 0); //用於快取
    }
  }
  function poll(node, callback) {
   if (callback.isCalled) {
= false;
    if (/webkit/i.test(navigator.userAgent)) {//webkit
      if (node['sheet']) {
    }
    // forFirefox
    else if (node['sheet']) {
      else if (node['sheet']) {
      try {
     Loaded = true;
}
      } catch (ex) {
        // NS_ERROR_DOM_SECURITY_ERR
     ed = true;
        }
     }
    }
    if (isLoaded) {
      // 給渲染時間。
      setTimeout(function() {
        callback();
      }, 1);  out(function() {
        poll(node, callback );
      }, 1);
    }
  }
//我的動態建立LINK函數
函式document.getElementsByTagName('head')[0],
        linkTag = null;

 if(!cssURL){com document .createElement('link');
 linkTag.setAttribute('id',(lnkId || '動態樣式'));
linkTag.setAttribute('rel','stylesheet');
linkTag .setAttribute('charset',(charset || 'utf-8'));
linkTag.setAttribute('media',(media||'all'));
 linkTag.setAttribute('type' ,'text/css');
    linkTag.href = cssURL;

    head.appendChild(linkTag);
}
function load. '/wp-content/themes/BlueNight/style.css');

    styleOnload(styleNode,function(){
       alert("loaded");
;


在看到seajs的程式碼的時候，我突然想起我看到了Diego Perini的另一個解決方案：




複製程式碼



複製程式碼



複製程式碼


程式碼如下：

/*
 * 版權所有 (C) 2010 Diego Perini
 * 保留所有權利。
 *
 * cssready.js - CSS 已載入/就緒狀態通知
 *
 * 作者：Diego Perini
 * 版本：0.1 * 發佈：20101104
 *
 * 許可證：
*  http://www.jb51.net * 下載：
 * /cssready/cssready.js
 */
function cssReady(fn, link) {
  var d = 文檔，
  t = d.createStyleSheet，
' 'cssRules',
  s = t ? 'styleSheet' : 'sheet',
  l = d.getElementsByTagName('link');
  // 傳遞的連結或最後一個連結節點
  link || (link = l[l.length - 1]);
  function check() {
    嘗試{
      return link && link[s] && link[s][r] &link[s][r] &link[s][r] ][ r][0];
    } catch(e) {
      return false;
    }
  }  })();
}



其實，如果你看過jQuery的domready事件的判斷的程式碼，原理也類似。也是透過setTimeout輪詢的方式來判斷DOM節點是否載入完畢。

還有，Fackbook透過在動態建立CSS樣式高度中包含一個固定的樣式，例如#loadcssdom，loadcssdom就是一個高度為1px的樣式。然後動態建立一個DOM對象，加入這個loadcssdom樣式。然後也是setTimeout輪詢loadcssdo是否已經有1px的了。這個處理方式的解決方案，大家可以下《CSSP: Loading CSS with Javascript – and getting an onload callback.》而《JavaScript Patterns》的作者Stoyan 則在他的博客裡，比較詳細的說明了《When is a樣式表真的加載完了嗎？ 》。

看完了這些，你可能會感嘆：汗，判斷CSS是否加載完畢，目前還真沒那麼容易！其實我這裡公平一個拋引磚玉，因為開發中，除了動態載入CSS，我們還有動態載入JavaScript，動態載入HTML的操作，有空我還寫了關於動態載入JavaScript的相關內容，不過在那之前，我建議你看看這些：
    《ensure – Ensure JavaScripts/HTML/CSS》需要時按需載入》，這個函式庫是專門處理動態載入HTML,CSS,JavaScript的。就像作者介紹的：
        Ensure 是微型 JavaScript 函式庫，提供了一個方便的函數 Ensure 可以讓你載入隨選 JavaScript、HTML、CSS，然後執行您的程式碼。確保 www.jb51.net 確保相關的 JavaScript 和 HTML 片段已經在瀏覽器 DOM 中，然後再執行使用它們的程式碼。
    《告訴CSS JavaScript 盡快可用》
    看完這個，你可能會明白就不會糾結：當你對網頁的某些部分進行樣式設計時，這些部分的外觀和工作方式會根據JavaScript 是否可用而有所不同。
好了，這次就說這麼多，希望對大家的開發有所幫助和學習有幫助！