相信很多人都注意到QQ空间或者百度空间以及其他某些站,他们的图片打开都会显示的是象马赛克一样不清晰的图片,然后慢慢变清晰。这样做的好处是避免用户长时间等待图片而跳出。
实现这样的效果有三种方式:
一、图片本身。
gif、PNG图片用PS保存的时候,最后一步选择[b]交错[/b]。如图1
jpeg图片使用渐进式,如图2
在fireworks另存为保存的时候 点击 选项 然后选择 渐进式...
二、js代码
<img src="ceshi2.jpg" name="pic" width="800" height="600" id="pic" /> <!--缩略图-->
<script type="text/javascript">
var img = new Image();
img.src = "ceshi.jpg"; /*最终显示的大图*/
img.onload = function() {
document.getElementById('pic').src = this.src;
}
</script>
三、html lowsrc属性
<img src="ceshi.jpg" lowsrc="ceshi2.jpg" width="800" height="600" border="0" />
在lowsrc中使用缩略图,浏览器会先加载lowsrc中的图片,缩略图尺寸小,放到正常图片的宽高自然会显示不清晰,待正常图片加载完毕,就会显示大图。
原理上第三种方法是这样,但是我测试了,貌似没有效果。
个人还是推荐第一种,特别是做图片站的朋友,这样优化无疑对seo以及用户体验都是有好处的。因为第二种是js,就算整到程序里,代码也会太多。
学习分享罢了,无技术含量,转载请注明出处,谢谢。