让IE支持PNG格式的JS库

介绍
http://www.schillmania.com/content/projects/png/
Demo
http://www.schillmania.com/projects/png/

原理
1.为PNG格式的图片建立一个完全相同的gif格式,在编码里面使用gif图片
2.利用IE支持DXImageTransform.Microsoft.AlphaImageLoader滤镜来使用PNG格式转换gif为png图片,并将png图片作为背景显示,首先检测浏览器,接下来判断class为png的元素,完成替换

使用
1.在<head>调用png.js

<script type="text/javascript" src="png.js"></script>

下载地址:http://www.schillmania.com/projects/png/png-demo.zip
2.用类png标记需要使用png格式的地方
首先建立两张同样的图片格式为别为png和gif,一是类库需要,二是防止IE被禁后破坏视觉效果
前景图片

?<img src="your-image.gif" class="png" style="width:XXXpx;height:YYYpx" />

背景图片

<div class="png" style="width:xxxpx;height:xxxpx;background-image:url(your-image.gif);background-repeat:no-repeat">
</div>

3.在</body>之前加入

?<script type="text/javascript">
?pngHandler.init();
?</script>

总结
这样做png图片使用起来就方便多了,不用重复的去使用IE滤镜,比起手动使用IE滤镜同时加载的图片数量加倍,增加并发连接数

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 让IE支持PNG格式的JS库

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏