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


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/jQuery 表单美化插件小结
Feb 14 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
微信小程序 教程之模板
Oct 18 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
js实现简单进度条效果
Mar 25 Javascript
vue实现列表滚动的过渡动画
Jun 29 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
smarty基础之拼接字符串的详解
2013/06/18 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
Python常用内置函数总结
2015/02/08 Python
Python实现将xml导入至excel
2015/11/20 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
Python matplotlib实时画图案例
2020/04/23 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
软件测试企业面试试卷
2016/07/13 面试题
十一酒店活动方案
2014/02/20 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
初中成绩单评语
2014/12/29 职场文书
大学生实习介绍信
2015/05/05 职场文书
2015年暑期见闻
2015/07/14 职场文书
个人售房合同协议书
2016/03/21 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL