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


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 相关文章推荐
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
vuex实现简易计数器
Oct 27 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 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
YII框架中使用memcache的方法详解
2017/08/02 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
JS不完全国际化&本地化手册 之 理论篇
2016/09/27 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
js实现每日签到功能
2018/11/29 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
python中私有函数调用方法解密
2016/04/29 Python
python实现日常记账本小程序
2018/03/10 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
如何运行带参数的python脚本
2019/11/15 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
超市业务员岗位职责
2013/12/05 职场文书
2014年计生标语
2014/06/23 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
2015年端午节活动方案
2015/05/05 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python