相信很多人都注意到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,就算整到程序里,代码也会太多。
学习分享罢了,无技术含量,转载请注明出处,谢谢。
分享到:
相关推荐
图片模糊变清晰图片模糊变清晰图片模糊变清晰
jquery实现鼠标滑过模糊图片变清晰的效果
让模糊不清楚的照片变清晰,去噪点,细节增强的傻瓜式图形处理软件。Digital Camera Enhance 是一款图像清晰处理工具。使用这款软件可以让模糊不清楚的照片变清晰,去噪点,细节增强的傻瓜式图形处理软件;还可以...
正确版C#合成图片类,生成模糊效果,图片更清晰类
使用picasa的时候,注意到它首先是显示模糊的图片,然后图片突然变得清晰,这样做有一定的好处——picasa的图片翻页是用javascript实现的,如果直接载入大图,中间势必会有个空档,用户在这中间会感觉很...
在手机移动客户端,我们经常看到图片由模糊到清晰的加载过程 如果抛给你这样一个问题,你会怎么去实现呢 而且是在不用js的基础上实现 今天懒人站长写了这样一个效果,供给大家参考使用 其原理就是...
仿"在路上" 模糊图片下拉变大清晰的实现
MATLAB神经网络和优化算法:40 模糊RBF网络.zip
MATLAB神经网络和优化算法:39 模糊逼近算法.zip
可以使模糊图像变清晰的软件 中文绿色版本 图片处理工具
用PS把模糊图像变清晰.pdf
ppt下载自看 记 述了ps中模糊照片变清晰的常用手段
把模糊照片变清晰 把模糊照片变清晰 把模糊照片变清晰
Ps让模糊照片变清晰,使得模糊的图片变得清晰
html5数字模糊滚动变清晰动画特效是一款基于html5 svg实现的模糊文字变清晰动画效果。
matlab神经网络和优化算法:50 模糊控制PID控制器.zip
matlab神经网络和优化算法:48 模糊控制实现解耦控制.zip