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

标签:
图像替换,状态域

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“图像替换新技术 状态域方法”

暂无“图像替换新技术 状态域方法”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。