[译]图片优化 第五章:AlphaImageLoader(3)
作者:s5s5 来源:[米随随] s5s5 时间:2010-08-29 18:39:00
VML的透明效果
使用VML是另一种在IE中使PNG32透明的方法,它解决了几个问题:Alpha透明,性能和背景重复。可惜的是,它使用了非标准标签(也可用JavaScript来生成,如果你希望你的初始标签清爽)和私有CSS。这里有一个如何实现它的例子。
例如,你有一个 的DIV,你需要用VML的 :rect (或 :shape) 和 :fill 标签来把包含它,如:
<v:rect>
<v:fill type=”tile” src=”alphatest.png”>
<div> </div>
</v:fill>
</v:rect>
某些标签之前,你还需要声明VML命名空间:
<xml:namespace ns=”urn:schemas-microsoft-com:vml” prefix=”v” />
而在你的样式表,你需要:
v\:rect {
behavior:url(#default#VML);
width: 100px;
height: 100px;
display: block;
}
v\:fill {
behavior:url(#default#VML);
}
测试页显示100个VML rect元素装载用时0.094秒(几乎是使用滤镜速度的10倍)和使用4Mb内存(是使用滤镜的1/10)。
正如你可见,这种解决方案增加了更多私有标签和CSS,但它仍然是一个相对于AlphaImageLoader的“价格”高的解决方案,。
(感谢Drew Diller的这篇文章 及 HTML Remix,从中无意中发现了这个方案的另一作用,解决工作中的另一难题——通过使用VML实现圆角,如:snook.ca)
P.S…其他过滤器怎么样?
AlphaImageLoader不是唯一的滤镜。另一种经常使用的是opacity滤镜。
例如,对于50%不透明度开发人员使用以下属性:
opacity: 0.5(标准)
-moz-opacity: 0.5 (Mozilla的早期版本,在FF 0.9之前)
IE浏览器:filter: alpha(opacity=50)
在IE6做一个快速测试,该滤镜消耗低于AlphaImageLoader,但它仍然使页面慢,并且消耗了相同数量的内存。该测试使用颜色做背景,没有使用图片做背景,但使用图片的结果也大致相同。
测试页 | 时间(秒) | 内存(MB) |
---|---|---|
测试#3 – 100 Divs,不使用 opacity | 0.016 | 0.2 |
测试#4 – 100 Divs,使用 opacity | 0.093 | 46.7 |