快捷導(dǎo)航

圖像替換新技術(shù) 狀態(tài)域方法

更新時(shí)間：2010年01月28日 22:44:39 作者：

熟悉css的開發(fā)者一定知道圖像替換技術(shù)，也深知它的意義，Dave Shea 曾在他的一篇文章對(duì)此做了詳細(xì)的總結(jié)

參看Dave Shea's excellent summary ，Paul Young 在分析現(xiàn)存的所有方法的優(yōu)缺點(diǎn)之后，提出了一種新的方法，并將其命名為“狀態(tài)域方法”（The StateMethod），本文將詳細(xì)介紹該方法的原理：

該方法檢查圖片是否禁用，并不是請(qǐng)求服務(wù)器上的圖片，因?yàn)槟菢訒?huì)導(dǎo)致一次額外的http請(qǐng)求。作者創(chuàng)建了一個(gè)巧妙的方法。

在大多數(shù)瀏覽器中，Image對(duì)象可以實(shí)例化并追溯到一個(gè)無效的URL（http：//0），這樣很容易檢測(cè)Image的狀態(tài)。如果禁用，onerror事件將觸發(fā)，在js文件的開頭，j建立一個(gè)新的圖像對(duì)象：

var img = new Image();

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

if (img.style.MozBinding != null)
{
   img.style.backgroundImage = "url(" +document.location.protocol + "http://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);
   }
}

另外一個(gè)富有挑戰(zhàn)性的瀏覽器是safari，如果請(qǐng)求是一個(gè)無效的URL，safari的狀態(tài)欄將出現(xiàn)錯(cuò)誤提示，但頁(yè)面布局不受任何影響。如果用戶的狀態(tài)欄處于開啟狀態(tài)，報(bào)錯(cuò)將一直持續(xù)，這很不專業(yè)，同樣，作者研究了另外一種可行的方案。如果Image來自于1*1的 gif圖像，且被數(shù)據(jù)編碼。如果Image禁用，其寬度將為0，以下為在safari中測(cè)試的情況：

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==";
   }
}

最后，對(duì)于其它瀏覽器，在開始初始化Image對(duì)象時(shí)，僅僅需要測(cè)試onerror觸發(fā)事件。

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

狀態(tài)域是可以切換的

可以創(chuàng)建一個(gè)系統(tǒng)讓用戶在文本和替代圖像之間切換。

查看示例（示例文件由Paul Young提供）

class屬性添加到html之上而不是body或其它子元素之上，主要原因在于在圖像替換之前，body需要全面加載。如果“image-on”不添加到html之上。當(dāng)狀態(tài)域啟用時(shí)，將會(huì)出現(xiàn)閃動(dòng)。

圖像替換技術(shù)是css中相當(dāng)重要的一部分。鑒于現(xiàn)存圖像替換技術(shù)的缺點(diǎn)，作者花大量時(shí)間另辟蹊徑，方法獨(dú)到，值得借鑒。

示例下載：tate-scope-image-replacement.zip

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

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