映像替換新技術 狀態域方法_javascript技巧

參看Dave Shea's excellent summary ，Paul Young 在分析現存的所有方法的優缺點之後，提出了一種新的方法，並將其命名為“狀態域方法”（The StateMethod），本文將詳細介紹該方法的原理：

該方法檢查圖片是否禁用，並不是請求伺服器上的圖片，因為那樣會導致一次額外的http請求。作者建立了一個巧妙的方法。

在大多數瀏覽器中，Image對象可以執行個體化並追溯到一個無效的URL（http：//0），這樣很容易檢測Image的狀態。如果禁用，onerror事件將觸發，在js檔案的開頭，j建立一個新的映像對象：

var img = new Image();

但是，有兩個古怪的瀏覽器對此方法並不相容。在Gecko瀏覽器中，不論Image是否被禁用。Onerror事件總是 被觸發。所幸的是，另外一種可行的方案可以解決此問題－－給html元素附加一個無效的背景圖片，然後通過getComputedStyle方法獲得 style屬性。如果Image禁用，其屬性為none或url(invalid-url:):

 if (img.style.MozBinding != null)
 {
   img.style.backgroundImage = "url(" +document.location.protocol + "//0)";
   var bg = window.getComputedStyle(img,'').backgroundImage;

   if (bg != "none" && bg !="url(invalid-url:)" || document.URL.substr(0, 2) == "fi")
   {
    document.enableStateScope("images-on", true);
   }
 }

另外一個富有挑戰性的瀏覽器是safari，如果請求是一個無效的URL，safari的狀態列將出現錯誤提示，但頁面 布局不受任何影響。如果使用者的狀態列處於開啟狀態，報錯將一直持續，這很不專業，同樣，作者研究了另外一種可行的方案。如果Image來自於1*1的 gif映像，且被資料編碼。如果Image禁用，其寬度將為0，以下為在safari中測試的情況：

 else
 {
   img.style.cssText ="-webkit-opacity:0";
   if (img.style.webkitOpacity == 0)
   {
     img.onload = function()
     {
      document.enableStateScope("images-on", img.width > 0);
     }
     img.src = 
      "data:image/gif;base64," +
      "R0lGODlhAQABAIAAAP///wAAACH5BAE" +
      "AAAAALAAAAAABAAEAAAICRAEAOw==";
   }
}

最後，對於其它瀏覽器，在開始初始化Image對象時，僅僅需要測試onerror觸發事件。

   else
   {
     img.onerror = function(e)
     {
      document.enableStateScope("images-on", true);
     }
     img.src = "about:blank";
   }

狀態域是可以切換的

可以建立一個系統讓使用者在文本和替代映像之間切換。

查看樣本（樣本檔案由Paul Young提供）

class屬性添加到html之上而不是body或其它子項目之上，主要原因在於在映像替換之前，body需要全面載入。如果“image-on”不添加到html之上。當狀態域啟用時，將會出現閃動。

映像替換技術是css中相當重要的一部分。鑒於現存映像替換技術的缺點，作者花大量時間另闢蹊徑，方法獨到，值得借鑒。

樣本下載：tate-scope-image-replacement.zip

翻譯原文：http://www.denisdeng.com/?p=235

英文原文：http://www.sitepoint.com/article/image-replacement-state-scope/