WEB前端

实现网页加载图片先模糊后清晰的效果

位置:首页 > WEB前端 > html教程,2012-10-22
这是关于怎么实现网页加载图片先模糊后清晰的效果的方法,在加载照片的时候,如果网速比较慢加载慢的话,它会先显示一个类似模糊有点小马赛克的质量比较差的照片打开一些网上的相册,在加载照片的时候,如果网速比较...

这是关于怎么实现网页加载图片先模糊后清晰的效果的方法,在加载照片的时候,如果网速比较慢加载慢的话,它会先显示一个类似模糊有点小马赛克的质量比较差的照片

打开一些网上的相册,在加载照片的时候,如果网速比较慢加载慢的话,它会先显示一个类似模糊有点小马赛克的质量比较差的照片,然后慢慢的变为清晰的照片,这样避免了用户在浏览照片的时候页面一片空白的情况,在html中 IMG 有个 lowsrc 属性
<img lowsrc="" src="" width="300" height="200" border="0" />
把图片的缩略图 放在lowsrc里面,这样的话因为缩略图是缩小的,按照原图片的比例显示就会有马赛克!
src里填写 原图片!
这样的话,原图片比较大,下载的慢,lowsrc的缩略图小加载快,所以会先显示被拉伸的缩略图,等大图下载完成后会显示原图,这样有个时间差,就是出现先由马赛克,然后变清晰的效果!
注意,测试的时候最好在远程服务器上,这样效果比较明显,本机的话,下载太快了,可能感觉不出来!

TAGS:网页加载图片先模糊后清晰网页快速加载图片

猜你喜欢

NewHot手机版