[译]图片优化 第五章:AlphaImageLoader

作者:s5s5 来源:[米随随] s5s5 时间:2010-08-29 18:39:00 

译者:AlphaImageLoader是一个让IE6正常显示PNG32时要用到的一个滤镜,但它在使用中也会产生一系列的问题,本文对使用AlphaImageLoader及替代方案都做了很详细的分析和总结。关于图片优化YUIblog有五章内容,其它内容大家貌似都懂,有兴趣的同学译吧。关于PNG32在Photoshop中导出的叫做PNG-24,但在Fireworks导出PNG会有三种格式,PNG8、PNG24、PNG32,它导出的PNG24是没有透明度的,为了防止大家搞错,所以我译做PNG32。

原文地址:http://yuiblog.com/blog/2008/12/08/imageopt-5

译文地址:http://www.misuisui.com/weblog/?p=2286

作者Stoyan Stefanov在雅虎的性能优化团队工作,领导开发YSlow性能工具。同时他还是一个开源贡献者、演讲者和技术作家,他的最新著作是《Object-Oriented JavaScript》。

本文是图片优化的第五章。点击以下链接查看其他章节:

本章图片优化主要介绍IE浏览器私有CSS滤镜:AlphaImageLoader,开发人员经常使用它来解决在IE下显示PNG32图片的透明度问题。但使用AlphaImageLoader会使网页性能降低,从而伤害用户体验。所以我认为应改尽可能避免使用AlphaImageLoader。

快速复习

我们在图片优化 第二章:选择正确的文件格式一文中提到,PNG格式有几种不同类型,大致可以分为:

  • Indexed (palette),也被称为PNG8有多达256种颜色。

  • Truecolor PNG,也被称为PNG32或PNG24,所有颜色都不会丢失。

这两种格式都支持 Alpha(变量)透明,但在IE6下PNG8显示为如同GIF图片一样的无变量的透明(例如来源),PNG32则在原本显示透明背景的地方显示成了灰色(如下图所示)。

AlphaImageLoader修复

IE6(及更老版本的IE)提供了一个针对PNG图片显示的解决方案,通过其私有CSS滤镜。以下代码可使PNG图片在浏览器中正常显示:

#some-element { background: url(image.png); _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop'); }

你会发现,下划线的CSS Hack被用来针对IE6及更老的版本,它的作用是:

  1. 不显示背景图片

  2. 使用微软的AlphaImageLoader滤镜加载背景的PNG图片

因为IE7不使用CSS淲镜也能支持PNG图片的Alpha透明。(但IE8中又不一样,它实际上完全改变了CSS滤镜的语法 。)

该滤镜的有趣之处在于,它并没有改变图片,相反,它在改变使用该滤镜的HTML元素。而更有趣的是,它对所有使用它的元素都只在一个UI处理线程中处理。这个过程中每个使用该滤镜的元素都要消耗系统资源,当你使用滤镜越多情况就会越糟糕,即使你所有元素其实是用同一张图片。

现在的问题是:这将如何影响该网页的表现?

假死!副作用#1

这里有一个简单的实验:创建一个页面,有一个CSS滤镜,然后模拟(和增大)网络中的延迟,延迟10秒加载淲镜中使用的图片。结果呢?在这10秒中什么也没显示(空白页),并且浏览器也会假死,这意味着你不能与浏览器进行交互:单击图标、菜单、键入网址…通通不行,甚至更不能关闭它。

这里是一个测试的例子。

在这个例子中,我没有用下划线,所以你可以看到在IE7下也一样会假死,即使在IE8的“兼容模式”下。

虽然效果演示的是夸张了的,但网络延迟也生活中的事实,这可能是最糟糕的用户体验,这意味着:有人来到你的网页,然后你让他的浏览器假死。

需要注意的是,它不阻塞并行下载。浏览器其实在后台还在下载其他网页文件,但没有进行渲染。你可以这样认为:IE不会渲染任何元素,直到所有的CSS下载结束(更多信息)。就是因为CSS中有一个图片的依赖于滤镜加载,所以CSS被认为没下载结束,导致IE不去渲染页面,直到依赖滤镜的图片被加载到。

如果你在网页中使用了多个AlphaImageLoader滤镜会怎么样呢?他们会一个接一个的处理。比如你有5个图片,每2秒延迟在服务器上,哪么浏览器就会有10秒的假死状态。

标签:AlphaImageLoader,图片优化,滤镜,IE6
0
投稿

猜你喜欢

  • 数据库名词解释

    2008-09-12 17:28:00
  • 基于网格的网页设计概念及实际应用案例

    2010-03-30 14:59:00
  • 用asp判断某IP是否属于某网段的另类算法

    2007-09-28 12:33:00
  • GC与JS内存泄露

    2010-09-25 19:01:00
  • SQL Server 2005代理服务应用软件组成

    2009-02-19 17:19:00
  • 10个很实用的js小脚本代码

    2007-10-17 21:08:00
  • ASP中Cache技术的应用

    2007-09-28 12:41:00
  • 修复 jQuery 中 isFunction 方法的 BUG

    2010-01-25 12:05:00
  • conn.execute(sql)后面加(0)和不加的区别

    2009-06-24 11:13:00
  • 详解css定位与定位应用

    2007-05-11 16:52:00
  • 取巧的边框等高

    2009-12-16 12:11:00
  • 用户界面设计中“状态”和“动作”的表达

    2011-01-06 12:36:00
  • 如何在MySQL查询结果集中得到记录行号

    2008-12-17 15:00:00
  • ASP 字符串转数字格式

    2009-08-19 17:18:00
  • 用ASP实现就MP3曲目信息的操作全攻略

    2008-05-28 12:42:00
  • Javascript优化五大原则

    2007-10-30 13:49:00
  • 保护Access 2000数据库的安全

    2008-10-23 13:55:00
  • 英文版面设计的8个禁忌

    2009-10-14 20:42:00
  • 如何让新页面在新窗口打开?

    2009-04-12 19:41:00
  • FrontPage XP设计教程2——网页的编辑

    2008-10-11 12:16:00
  • asp之家 网络编程 m.aspxhome.com