图片加载由模糊变清晰-图片优化

开发过程中，一些图片的展示时，加载很慢很久，后来把图片缩放压成缩略图吧，速度是快了但是模糊不清，如何处理这样问题，下面就和大家分享一下自己的处理方法。

先让客户端加载像素小的缩略图：

<img src="缩略图.jpg" name="pic" width="800" height="600" id="news" />

然后用js处理：

var img = new Image();//新建一个图片对象

img.src = "原图.jpg"; //最终显示的大图

img.onload = function() {

document.getElementById('news').src = this.src;

}

这样就实现预加载缩略图，最终显示像素高的原图，这样做的好处是避免用户长时间等待图片而跳出或者对产品的烦躁情绪。

我看网上也有用HTML标签实现这种效果的：

<img src="原图.jpg" lowsrc="缩略图.jpg" width="800" height="600" border="0" />

在lowsrc属性中使用缩略图，浏览器会先加载lowsrc中的图片，缩略图尺寸小，放到正常图片的宽高自然会显示不清晰，待正常图片加载完毕，就会显示大图。但我试了试一些不同版本的游览器，没效果，依旧是直接显示原图的。

还有网友说更改图片本身，gif、PNG图片用PS保存的时候，最后一步选择【交错】，我试了试，没有【交错】相关选项啊，可能是我的PS版本过高吧。

转载请注明—作者：Java我人生（陈磊兴）原文出处/chenleixing/article/details/44600185

最后，认真看过的网友们，大神们，如有感觉鄙人有哪个地方说的不对或者不妥或者你有很好的提议或者建议或点子方法，还望您大恩大德花费n秒的时间留下你的宝贵文字（留言），以便你，我，还有大家更快地成长与进步.......