首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

网站优化之图片优化:由模糊不清逐渐变清晰

2012-10-06 
网站优化之图片优化:由模糊逐渐变清晰jpeg图片使用渐进式,如图2在fireworks另存为保存的时候 点击 选项?

网站优化之图片优化:由模糊逐渐变清晰


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,就算整到程序里,代码也会太多。

学习分享罢了,无技术含量,转载请注明出处,谢谢。

热点排行