网络编程
位置：首页>> 网络编程>> 网页设计>> [译]图片优化 第五章：AlphaImageLoader（3）

[译]图片优化 第五章：AlphaImageLoader（3）

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

标签：AlphaImageLoader,图片优化,滤镜,IE6

VML的透明效果

使用VML是另一种在IE中使PNG32透明的方法，它解决了几个问题：Alpha透明，性能和背景重复。可惜的是，它使用了非标准标签（也可用JavaScript来生成，如果你希望你的初始标签清爽）和私有CSS。这里有一个如何实现它的例子。

例如，你有一个 的DIV，你需要用VML的 :rect (或 :shape) 和 :fill 标签来把包含它，如：
<v:rect>
　 <v:fill type=”tile” src=”alphatest.png”>
　 　 <div>&nbsp;</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，但它仍然使页面慢，并且消耗了相同数量的内存。该测试使用颜色做背景，没有使用图片做背景，但使用图片的结果也大致相同。

opacity测试结果
测试页时间（秒）内存（MB）
测试＃3 – 100 Divs,不使用 opacity0.0160.2
测试＃4 – 100 Divs,使用 opacity0.09346.7
第一页 上一页 1 2
3
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com