网站首页 > 开源技术 正文
AlphalmageLoader过滤器是IE浏览器专有的一个关于图片的属性，主要是为了解决半透明真彩色的PNG显示问题。
AlphalmageLoader的语法如下：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性：
enabled：是一个布尔值，表示是否激活滤镜功能，true表示激活，false表示禁止。
sizingMethod：设置或检索滤镜对图片所在的对象容器边界内显示方式。
? crop：表示会对图片进行剪切让其适应对象尺寸。
? image：增大或减小对象的尺寸边界以适应图片的尺寸，默认值。
? scale：通过缩放图片的方法来适应对象的尺寸边界。
src：表示背景图像的绝对或相对的URL地址。
下面是一个使用的实例：
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/test.png',sizingMethod='scale');">
站在性能分析的角度，不建议使用AlphalmageLoader过滤器主要原因如下：
1. 会增加内在的消耗，因为在加载过程不是按图像应用来加载的，而是按每个元素应用来加载的。
如果使用抓包工具或页面分析工具会发现，使用AlphalmageLoader过滤器请求的时候明显会更长，并且所消耗的内存也会明显增多。
2.这个过滤器在下载图片时会阻止浏览器进行渲染并且冻结浏览器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test...</title>
</head>
<body>
<img src="images/tenpay.gif"/>
<img src="images/tenpayc2c.jpg"/>
<img src="images/no_picture.gif"/>
<h1>test...</h1>
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/wap_logo.png',sizingMethod='scale');">
<a href="/" style="position:relative">Web site</a>
<table width="546" border="0" cellpadding="0" cellspacing="0" height="100px">
<tr class="tittr">
<td > <form><input type="text" name="username" style="position:relative"/></form></td>
</tr>
<script src="js/test.js"></script>
</body>
</html>
上面是一个测试页面，当加载到wap_logo.png（使用AlphaImageLoader过滤器处理）这个图片时，浏览器被冻结，此时浏览器无法动弹，冻结的时间超过1秒。
并且需要注意的是，并行下载不会被阻止，浏览器仍然在后台下载其他页面组件，但是没有渐进式渲染。
由于以上原因所以建议尽量避免使用AlphalmageLoader过滤器， 为了解决对这类透明度的过滤器的问题，通常还有以下两种方法：
1.使用VML透明度
VML是IE浏览器中关于PNG透明的另一种方法，
例如：定义一个div里面有一个vim空间
<v：rect>
<v：fill type =“ tile” src =“ test.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: 500px;
height: 500px;
display: block;
}
v\:fill {
behavior:url(#default#VML);
2.使用其它的过滤器
当然AlphaImageLoader并不是唯一存在的过滤器，另一种流行的是不透明度滤镜。
例如：如果需要对50％不透明度，那么可以使用以下属性。
? opacity: 0.5 (一般标准的用以)
? -moz-opacity: 0.5 (Mozilla和Firefox早期版本)
? filter: alpha(opacity=50)(对于IE浏览器)
猜你喜欢
- 2024-10-07 前端进阶，提高技能（前端如何快速提升自己）
- 2024-10-07 性能测试YSLOW前端调优23大规则(七)——避免使用CSS表达式
- 2024-10-07 著名ARPG伊苏系列的新作《伊苏8》
- 2024-10-07 「优化连载三」前端优化（前端优化是做什么的）
- 2024-10-07 大型网站Web前端优化最佳实践，以及最全优化工具集锦
- 2024-10-07 史上最全java架构师技能图谱(上)（java架构师进阶之路）
- 2024-10-07 性能测试YSLOW前端调优23大规则(十)——精简JavaScript和CSS
- 2024-10-07 入门学习web前端的一点小建议（web前端怎么学好）
- 2024-10-07 前端学习路线（前端怎么学）
- 2024-10-07 零基础学前端看哪些书?（零基础学前端书籍推荐）
欢迎 你 发表评论:
- 最近发表
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)
本文暂时没有评论，来添加一个吧(●'◡'●)