图像替换技术(The State Scope Method)
转自：http://www.cnblogs.com/rubylouvre/archive/2009/08/06/1539977.html
感谢蓝色理想的dishuipiaoxiang 的译文，让我了解到这种崭新的图片替换方法。注意，是图片替换而是图片轮换。相信每一个WEB设计师都要经常用到它！当我们要用到一些特别的字体做LOGO，商标与Banner时，为了解决用户机不存在这种字体时就只有用图片替代或者使用sIFR方案（@face与eot字体都不靠谱），当然前者是比后者常用得多，也简单得多。而图片替换大法分很多种，如直接隐藏文字法，margin移位法，文本缩进法，容器零高度零宽度法……等等。下面，是我根据原译者的文章结合我的理解，重新讲述如何使用此方法。
新的方法，这种被原作者Paul Young称之为The State Scope Method的图片替换技术，思路非常独特，是把整个文档当成一个状态机，通过监视它的状态来绑定或删除它上面的某个类，而这个类携带着显示某个区域的背景图片的信息。换言之，这个类是后期添加上去的，但相对一般的JS动态添加，它却又早得多了，因为它是绑定在最顶层的元素html上的！可能在这里，许多人都被搞晕，包括原译者，所以他给出的示例才运行不了。这涉及比较深层次的编程理念，原作者对此也大论了一番设计模式……不过没关系，我们可以细细分析。
h1 {
width: 100px;
height: 50px;
}
@media screen {
.images-on h1 {
text-indent: -10000px;
background-image: url(image.png);
overflow: hidden;
}
}
第一条CSS规则总是执行的，h1就是我们所说的要添加背景图片的区域。（原译者翻译The State Scope Method为“状态域法”，虽然看起来比较有味，但不知所云，为了见名达义，我译作“状态区域法”，状态是指html元素的状态，区域是指添加背景图片的区域，这样称呼是不是易懂些呢！）
第二条是选择执行，它看起来有点复杂，整个包围在@media screen块中，它是用来保证图像替换只发生在屏幕阅读器中，而不是在打印状态下执行。如果不这样处理，页面打印时，多数用户将看到一个很大的空隙而不是有意义的文本。不过如果我们不打印，它就可有可无了，原作者Paul Young给出的示范页就没有@media screen块了。抛开@media screen不谈，我们发现里面是个后代选择器（Descendant selectors），亦有人称之为包含选择符，于是这些背景显示信息是否执行处理，就关键在于它（h1）的祖先(.images-on)是否存在了！我们可以通过addClass与removeClass为html动态添加或删除.images-on类。
下面是核心代码：
var hasClass = function(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
var addClass = function(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
var removeClass = function(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
/**
*@scope是某个区域中设置如何实现图片替换的类，是要绑定于html元素上
*@on为html元素的状态，用于动态绑定或删除上面的scope类
*/
document.enableStateScope = function(scope, on) {
var de = document.documentElement;
on ? addClass(de,scope) : removeClass(de,scope);
};
那么剩下的问题就是如何监视html元素的状态或判定html元素的状态。这个实现实在很巧妙，它通过检测Image对象是在发生onerror事件来为on赋true值或false值（根据javascript的事件传播机制，子元素的大多数低级事件会冒泡到上一级元素直至最顶层元素，如果该元素也有处理此事件的能力就执行此事件）。很明显，onerror是个很原始的事件，一处发生错误，整个文档就会报错。根据我们上面的提法，Image对象 onerror的状态就是html元素的状态，并且判断html元素的状态，远比通过遍历DOM树后才能定位到背景图片所在的元素，再进行判定要快！
既然是检测Image对象，那么我们首先要知道此元素是否存在，但我们不是检测它是否存在于服务器端，那会导致一次额外的http请求。作者创建了一个巧妙的方法。
在大多数浏览器中，Image对象可以实例化并会自动追加一个无效的URL（http：//0），通过它我们就很容易判断这图片是否可用。因为如果是这样，就会触发onerror事件，那么我们就把on设置为false，否则为true。这此，我们可以在JS中，动态创建一个Image对象。
var img = new Image();
但是，有两个游览器对此方法并不兼容。在Gecko内核浏览器中（如FF），不论Image是否可用，总是会激发onerror事件，因此我们原来的判定方案就行不通了。幸好，我们找到另一个方法。我们可能为html元素添加一个无效的背景图片，然后通过getComputedStyle方法获得其 style.backgroundImage值，如果图片不可用，则此值为 none或者url(invalid-url:)。这时，我们就可以放心给on设置为false了！
if (img.style.MozBinding != null){ /*判断是否为火狐*/
/*强制设置图片的Url为 http：//0 */
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"){
/**
*如果图片的Url值不为 none与url(invalid-url:)，或者地址栏不为file:///
*那么设置on为true
*/
document.enableStateScope("images-on", true);
}
}
另外一个富有挑战性的浏览器是safari，如果请求是一个无效的URL，safari的状态栏将出现错误提示，但页面布局不受任何影响。如果用户的状态栏处于开启状态，报错将一直持续，这很不专业，为此，作者提出了另外一种可行的方案。通过base64编码动态生成一个1*1的gif图片，来阻止一直报错。如果图片不可用，它的宽度将为零，我们可能用它作为我们判定的标准。
if (img.style.MozBinding != null) { /*判断是否为火狐*/
/************略************/
}else {
img.style.cssText = "-webkit-opacity:0";
if (img.style.webkitOpacity == 0) { /*判断是否为safari*/
img.onload = function(){
/*如果图片的宽大于零，证明图片可用，我们把on设置为true，否则为false*/
document.enableStateScope("images-on", img.width > 0);
}
/*动态生成gif图片，预防因为图片不存在，一直报错！*/
img.src = "data:image/gif;base64,"
+ "R0lGODlhAQABAIAAAP///wAAACH5BAE"
+ "AAAAALAAAAAABAAEAAAICRAEAOw==";
}
}
最后，对于其它浏览器，在开始初始化Image对象时，仅需检测onerror事件是否发生。
if (img.style.MozBinding != null) {
/************略************/
}else {
if (img.style.webkitOpacity == 0){
/************ 略************/
}else{
img.onerror = function(e) {
document.enableStateScope("images-on", true);
}
/*取消onerror 事件 */
img.src = "about:blank";
}
}
下面给出完整方法，利用闭包保持enableStateScope方法一直存在下去！
(function(){
d=document;e=d.documentElement;c="images-on";i=new Image();t=i.style;s=d.enableStateScope=function(s,o){
if(o)e.className+=" "+s;else e.className=e.className.replace(new RegExp("\\b"+s+"\\b"),"");
};if(t.MozBinding!=null){
t.backgroundImage="url("+d.location.protocol+"//0)";b=window.getComputedStyle(i,'').backgroundImage;if(b!="none"&&b!="url(invalid-url:)"||d.URL.substr(0,2)=="fi")s(c,true);
}else{
t.cssText="-webkit-opacity:0";if(t.webkitOpacity==0){
i.onload=function(){
s(c,i.width>0);
};i.src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
}else{
i.onerror=function(){
s(c,true);
};i.src="about:blank";
}
}
})();
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> </style> <script type="text/javascript">/*<![CDATA[*/ var hasClass = function(ele,cls) { return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); } var addClass = function(ele,cls) { if (!this.hasClass(ele,cls)) ele.className += " "+cls; } var removeClass = function(ele,cls) { if (hasClass(ele,cls)) { var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); ele.className=ele.className.replace(reg,' '); } } // Don't copy and paste this code, use the minified script document.enableStateScope = function(scope, on) { var de = document.documentElement; on ? addClass(de,scope) : removeClass(de,scope); }; (function(){ var de = document.documentElement; var img = new Image(); // 针对于 Gecko内核游览器的处理 if (img.style.MozBinding != null){ img.style.backgroundImage = "url(" + document.location.protocol + "//0)"; var bg = window.getComputedStyle(img, '').backgroundImage; //如果images为off,则在FF2以及其旧版本中，bg的值为 "none" //在FF3中，bg的值为"url(invalid-url:)" if (bg != "none" && bg != "url(invalid-url:)" || document.URL.substr(0, 2) == "fi"){ document.enableStateScope("images-on", true); } }else{ //针对于Safari游览器（包括 iPhone）的处理 img.style.cssText = "-webkit-opacity:0"; if (img.style.webkitOpacity == 0){ img.onload = function(){ document.enableStateScope("images-on", img.width > 0); } // Source the image to a 43-byte 1x1 pixel GIF image encoded as a data URI. img.src = "data:image/gif;base64," + "R0lGODlhAQABAIAAAP///wAAACH5BAE" + "AAAAALAAAAAABAAEAAAICRAEAOw=="; }else{// Handling for everything else img.onerror = function(e){ document.enableStateScope("images-on", true); } img.src = "about:blank"; } } } )(); //]]> </script> <script type="text/javascript">//<![CDATA window.onload = function(){ document.enableStateScope("images-on", false); } // Toggles the images-on state scope on and off, // and displays the appropriate message function toggle(on){ document.enableStateScope("images-on", on); document.getElementById(on ? "stateScopeOn" : "stateScopeOff").style.display = "block"; document.getElementById(on ? "stateScopeOff" : "stateScopeOn").style.display = "none"; } //]]> </script> <style type="text/css"> .width{ width: 800px; margin: auto; text-align: left; } .header H1{ margin-top: 10px; margin-bottom: 25px; color: white; line-height: 1; top: -35px; font-size: 9pt; text-transform: uppercase; } .header H1 .statescope{ color: #ABDDA9; letter-spacing: -2px; text-transform: none; font-size: 35pt; top: 0.52em; } .images-on .header H1{ /*利用images-on来监视H1的样式*/ text-indent: -12345px; overflow: hidden; background:url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_aggregated.png) no-repeat; width: 297px; height: 66px; top: 0; } /*Toggle Switch*/ #stateScopeOff, #stateScopeOn{ position: absolute; top: -1px; right: 25px; background-color: white; padding: 9px 15px; border: 1px solid #79B17C; /*[e]1px solid @00*/ font-size: 10pt; z-index: 1; } #stateScopeOn{ display: none; } </style> </head> <body> <div class="width"> <div class="header"> <h1>The <span class="statescope">State Scope</span></h1> </div> </div> <div id="stateScopeOff">现在images-on这个类 <strong>是不存在的。</strong><a href="javascript:toggle(true)">是否添加它？</a></div> <div id="stateScopeOn">现在images-on这个类 <strong>已经存在。</strong><a href="javascript:toggle(false)">是否删掉它？</a></div> </body> </html>
此方法的一些优点
* 当客户端的电脑不支持javascript与禁止图片显示时，它都能优雅地降级而不致于页面效果有太多的差异
* 支持半透明或透明的图片
* 实现非常简单，只要导入我们的脚本以及设置需要图片替换的区域
* 由于是用非常基础的技术，即使是过去的游览器中也畅通无阻
* 符合标准，对屏幕阅读器与搜索引擎友好
* 不需要添加额外的标签
* 不消耗内存（因为基本不遍历DOM树）
* 即使是页面加载完毕对DOM进行操作也不会影响它的效果
* 在加载过程基本不会引发或只有轻微的闪烁现象
* 文本与图片可以在容器元素设置居中或居左对齐
* 不要求在服务器端存在一张1*1的gif图片来防止出错
* 在显示器与打印页上都显示良好
* 由于是使用CSS background-image属性来设置图片，便于我们使用image sprites技术来减少请求数
原作者Paul Young：http://www.sitepoint.com/article/image-replacement-state-scope/
