当前位置：首页 - 正文

百度图片加载时先模糊后清晰的效果是怎样实现的?

发布网友发布时间：2022-04-25 16:38

共3个回答

懂视网时间：2022-05-16 10:04

1.背景介绍

在网络相册应用中用户查看照片是最朴素的需求，当网络比较慢的时候查看照片等待的时间是比较长的，用户体验会很差。

2.现状

现在加载照片的方法主要有一下两种：
（1）最原始的方式在html页面直接用img标签加载显示照片。该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程，并且不能开始给用户看到照片大概的情况，用户体验比较不好
（2）在html页面先用img标签加载显示照片的缩略图，同时用javascript隐藏的加载照片的原图，等照片大图加载完成后再将原图显示到页面中。以下是流程图：

Javascript实现图片加载从模糊到清晰显示的方法

3.我们的解决方案

QQ相册最近做的一些优化方法解决了上诉两个方法的缺点和满足了用户查看照片的需求：第一时间看到照片大概情况和尽可能快的看到清晰的原图。该方法使用缩略图和原图同时加载并叠加显示，先加载缩略图并拉大显示，大图叠加在缩略图上面同时加载。缩略图很小通常很快就能给用户看到照片模糊的效果，大图加载过程中从上往下逐步覆盖缩略图，这样用户就可以看到加载过程中的大图。

（1）示例图

Javascript实现图片加载从模糊到清晰显示的方法

如上如所示，本方法的处理步骤是：
1).获取照片缩略图和原图的URL，获取照片的长和宽；
2).加载并显示照片缩略图，将缩略图按照片的长和宽拉伸显示，这时用户看到的是模糊的效果；
3).加载并显示照片原图，将原图叠加在缩略图上面显示，原图加载多少就显示多少，没有加载的还是显示缩略图，逐步将缩略图覆盖掉，原图在加载的过程中用户看到的是照片从模糊到清晰的渐变效果。
4).原图加载完后，原图已经全部将缩略图覆盖，这时用户看到的是真实的原图。此时可以隐藏缩略图防止缩略图干扰PNG或GIF等有透明效果的图片显示。

（2）示例代码

<!--设置照片的大小-->
<div style="width:400px;height:300px;">
 <!--小图拉大显示-->
 <img src="small_url" style="width:100%;height:100%;"/>
 <!--原图叠加在小图上面-->
 <img src="big_url" style="width:100%;height:100%;position:absolute;top:0px;left:0px;"/>
</div>

更多Javascript实现图片加载从模糊到清晰显示的方法相关文章请关注PHP中文网！

热心网友时间：2022-05-16 07:12

打开一些网上的相册，
在加载照片的时候，
如果网速比较慢加载慢的话，
它会先显示一个类
似模糊有点小马赛克的质量比较差的照片，
然后慢慢的变为清晰的照片，
这样避免了用户在
浏览照片的时候页面一片空白的情况，在
html
中

IMG
有个

lowsrc
属性

<img lowsrc="" src="" width="300" height="200" border="0" />
把图片的缩略图

放在
lowsrc
里面，这样的话因为缩略图是缩小的，按照原图片的比例显
示就会有马赛克！

src
里填写

原图片！

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