参看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/

　　推荐阅读

　　javaScript 关闭浏览器 (不弹出提示框)

复制代码 代码如下: <script language="javaScript"> 　　function closeWindow() 　　{ 　　　　　window.opener = null; 　　　　　window.open(' ', '_self', ' '); 　　　　　window.close(); 　　} </script>>>>详细阅读

本文标题：图像替换新技术 状态域方法

地址：http://www.17bianji.com/kaifa2/JS/27164.html

 1/2    1