YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » pngfix.js IE7 以下浏览器中处理 PNG 图片背景透明的解决方案

pngfix.js IE7 以下浏览器中处理 PNG 图片背景透明的解决方案

PNG 图片处理透明效果的图片质量要比 GIF 格式的图片好很多。不过在目前情况下,IE7 以下的浏览器(主要是IE6 和 IE5.5)在处理 PNG 图片透明效果的时候会有问题,背景不是透明的。这个问题我想很多朋友都遇到过,我们大多采用两种解决方案:

  • 1. 使用 JavaScript 做浏览器判断,如果是IE7以下浏览器,则使用 gif 格式的图片来做兼容解决方案。
  • 2. 使用 pngfix.js 通过 JavaScript 来修复 IE 低版本浏览器对 alpha 透明通道的处理显示问题。

第一种的的具体处理方法不是我这里要介绍的重点,所以具体的方法请大家自己 google 一下。总的来说以上两种方法都还不错,不过我更倾向使用 pngfix.js 来处理。主要有三点理由————第一,判断浏览器版本的方法在所有浏览器中都会触发,有些格外的资源消耗。第二,PNG 图片的透明效果更好,图片看上去更漂亮,对用户来说视觉效果会更好。第三,在做前端性能优化压缩图片体积的时候,采用 YSLOW 的 Smush.it 或则 Google 的 pagespeed 里的图片优化工具时,原来使用的 gif 图片都会使用 png 格式压缩图片体积。为了省力,我也非常愿意用 PNG 的图片。用工具压缩好图片后,只用上传替换图片就解决了。 至于这里的图片优化工具和优化图片的介绍,自己用一下Smush.it和看 google 图片优化的介绍就知道了。

好了,既然 pngfix.js 是我们最终选定的解决方案,我们就先来看看它的代码是怎么样的吧:

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <head> with DEFER keyword wrapped in conditional comments:

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js">
</script>
<![endif]-->
==================================================================
            说明:代码我稍微做了点调整,不过不影响使用
*/
(function(){
	var arVersion = navigator.appVersion.split("MSIE"),
	    version = parseFloat(arVersion[1]),
	    i = 0,
	    img = null,
	    imgName = "",
	    imgID = "",
	    imgClass = "",
	    imgTitle = "",
	    imgStyle = "",
	    strNewHTML = "";
	
	if ((version >= 5.5) && (document.body.filters)) {
		for (; i < document.images.length; i += 1) {
			img = document.images[i];
			imgName = img.src.toUpperCase();
			if (imgName.substring(imgName.length - 3, imgName.length) === "PNG") {
				imgID = (img.id) ? "id='" + img.id + "' " : "";
				imgClass = (img.className) ? "class='" + img.className + "' " : "";
				imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
				imgStyle = "display:inline-block;" + img.style.cssText;
				if (img.align === "left") {
					imgStyle = "float:left;" + imgStyle;
				}
				if (img.align === "right") {
					imgStyle = "float:right;" + imgStyle;
				}
				if (img.parentElement.href) {
					imgStyle = "cursor:hand;" + imgStyle;
				}
				var strNewHTML = "<span " + imgID + imgClass + imgTitle +
				" style=\"" +
				"width:" +
				img.width +
				"px; height:" +
				img.height +
				"px;" +
				imgStyle +
				";" +
				"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" +
				"(src=\'" +
				img.src +
				"\', sizingMethod='scale');\"></span>";
				img.outerHTML = strNewHTML;
				i -= 1;
			}
		}
	}
})();

代码已经很简洁明了,主要是通过遍历页面中的所有图片(images)对象,然后给每张图片添加上 IE 特有的透明滤镜处理方法。

"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" +
"(src=\'" +
img.src +
"\', sizingMethod='scale');

代码本身没有太多需要介绍的了,只是要特别说一下作者很细心,代码很严谨。首先调用的时候,使用了 IE 特有的版本判断处理来加载pngfix.js。

// 调用方法
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js">
</script>
<![endif]-->

而在脚本中,又做了一次 IE 浏览器版本的判断:

// 判断浏览器版本大于等于 5.5
// 5.5 以下的 IE 浏览器太过古老,JavaScript 支持都不是太好。
// 5.5 以下 PNG 图片是否支持我没有亲自测试过,不过大家可以测试一下。
if ((version >= 5.5) && (document.body.filters)) {
 // code here
}

细心的你也一定发下了,由于是 IE 浏览器,作者在 script 标签中还添加了 defer 属性,来延迟加载 pngfix.js,而避免脚本处理时阻塞页面的正常加载。就介绍这么多了。希望对需要处理 png 图片问题的朋友能有所帮助。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:pngfix.js IE7 以下浏览器中处理 PNG 图片背景透明的解决方案

« »

6 条评论

  • 我忘了说明一下,运用时要注意这面中的数据图片不能绑定事件,不过我还没有真正测试过。我运用的时候,页面中的图片都是直接要展示的数据,没有绑定任何事件的。

  • 第4条测试模版评论分页

  • 第3条测试模版评论分页

  • 自己整的一个新模版,试试评论怎么样?

    • 测试模版评论分页

      • 第二条测试模版评论分页

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)