前端学堂(好切网)-Web前端开发,网页切图教程分享平台
前端学堂(好切网),PS网页切图,专业WEB前端外包网站
您的位置:首页 > 前端学堂 > HTML/CSS

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

2017-03-24 12:30:59分类:HTML/CSS阅读(295)

经常浏览网页的时候,看到一种效果:图片从模糊变成清晰。比如打开一些网上的相册,在加载照片的时候,如果网速比较慢加载慢的话,它会先显示一个类似模糊有点小马赛克的质量比较差的照片,然后慢慢的变为清晰的照片,这样避免了用户在浏览照片的时候页面一片空白的情况,从用户体验角度来说是比较友好的。

那么这种网页图片先模糊后清晰的效果如何实现呢?

在html中 img 标签有个 lowsrc 属性:

<img lowsrc="缩略图" src="清晰大图" width="1000" height="600" border="0" />

在属性lowsrc里面添加缩略图的图片路径,这样的话因为缩略图的尺寸是比较小的,按照大图的尺寸显示就会有马赛克!

在属性src里填写原清晰图片的路径。

这样的话,原图片比较大,下载的慢,lowsrc的缩略图小加载快,所以会先显示被拉伸的缩略图,等大图下载完成后会显示原图,这样有个时间差,就是出现先由马赛克,然后变清晰的效果!

注意,测试的时候最好在远程服务器上,这样效果比较明显,本机的话,下载太快了,可能感觉不出来!

原文链接:http://www.hqhtml.com/htmlcss/28.html,出自好切网(前端学堂),转载请注明出处。
相关阅读 ~
推荐文章

© 2016 好切网(hqhtml.com) 长春诺阳科技有限公司(网页前端切图) 版权所有 吉ICP备15007500号