源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

图像替换新技术 状态域方法

  • 时间:2020-06-11 09:02 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:图像替换新技术 状态域方法
参看[url=http://www.mezzoblue.com/tests/revised-image-replacement/]Dave Shea's excellent summary[/url] ,[url=http://www.sitepoint.com/articlelist/558]Paul Young [/url]在分析现存的所有方法的优缺点之后,提出了一种新的方法,并将其命名为“状态域方法”(The StateMethod),本文将详细介绍该方法的原理: 该方法检查图片是否禁用,并不是请求服务器上的图片,因为那样会导致一次额外的http请求。作者创建了一个巧妙的方法。 在大多数浏览器中,Image对象可以实例化并追溯到一个无效的URL(http://0),这样很容易检测Image的状态。如果禁用,onerror事件将触发,在js文件的开头,j建立一个新的图像对象: [code]var img = new Image();[/code] 但是,有两个古怪的浏览器对此方法并不兼容。在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);    }  }[code] [/code] 另外一个富有挑战性的浏览器是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==";    } }[code] [/code] 最后,对于其它浏览器,在开始初始化Image对象时,仅仅需要测试onerror触发事件。 [code]   else [/code] [code]   { [/code] [code]     img.onerror = function(e) [/code] [code]     { [/code] [code]      document.enableStateScope("images-on", true); [/code] [code]     } [/code] [code]     img.src = "about:blank"; [/code] [code]   } [/code] [b]状态域是可以切换的[/b] 可以创建一个系统让用户在文本和替代图像之间切换。 [url=http://www.denisdeng.com/exzample/state-scope-image-replacement.html]查看示例(示例文件由Paul Young提供)[/url] class属性添加到html之上而不是body或其它子元素之上,主要原因在于在图像替换之前,body需要全面加载。如果“image-on”不添加到html之上。当状态域启用时,将会出现闪动。 图像替换技术是css中相当重要的一部分。鉴于现存图像替换技术的缺点,作者花大量时间另辟蹊径,方法独到,值得借鉴。 [b]示例下载[/b]:[url=http://xiazai.jb51.net/201001/yuanma/state-scope-image-replacement.rar]tate-scope-image-replacement.zip[/url] [b]翻译原文:[/b][url=http://www.denisdeng.com/?p=235]http://www.denisdeng.com/?p=235[/url] [b]英文原文[/b]:[url=http://www.sitepoint.com/article/image-replacement-state-scope/]http://www.sitepoint.com/article/image-replacement-state-scope/[/url]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部