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


Posted in Javascript onJanuary 28, 2010

参看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";
   }

状态域是可以切换的

可以创建一个系统让用户在文本和替代图像之间切换。

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

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

Javascript 相关文章推荐
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
对vue中methods互相调用的方法详解
Aug 30 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
JavaScript实现HSL拾色器
May 21 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
javascript innerText和innerHtml应用
Jan 28 #Javascript
使用JavaScript库还是自己写代码?
Jan 28 #Javascript
js或css实现滚动广告的几种方案
Jan 28 #Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 #Javascript
javascript面向对象的方式实现的弹出层效果代码
Jan 28 #Javascript
jquery 常用操作方法
Jan 28 #Javascript
jquery 经典动画菜单效果代码
Jan 26 #Javascript
You might like
Yii2框架使用计划任务的方法
2016/05/25 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
js文字横向滚动特效
2015/11/11 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
9个JavaScript日常开发小技巧
2020/10/06 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
Python字典简介以及用法详解
2016/11/15 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
python实现坦克大战
2020/04/24 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
医学专业大学生求职信
2014/07/12 职场文书
标准版离职证明书
2014/09/12 职场文书
大学军训的体会
2014/11/08 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
运动会开幕式主持词
2015/07/01 职场文书
初中思品教学反思
2016/02/20 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS