JavaScript实现图片从模糊到清晰加载效果

背景介绍与现状分析

1.背景介绍

在网络相册应用中，用户查看照片是最基础的需求。然而，当网络状况不佳时，查看照片的等待时间往往较长，这会严重影响用户体验。

2.现状

目前加载照片的方法主要有以下两种： （1）最原始的方式是在HTML页面中直接使用img标签加载并显示照片。这种方式在网络速度较慢或照片体积较大时，会导致页面出现长时间的空白等待，且用户无法提前预览照片的大致轮廓，体验较差。 （2）在HTML页面中先通过img标签加载显示照片的缩略图，同时利用JavaScript隐藏加载照片的原图，待大图加载完成后，再将原图显示在页面中。以下是该流程的示意图：

图片渐进式加载解决方案

3.我们的解决方案

QQ相册近期实施的优化措施解决了上述两种方法的缺点，并满足了用户查看照片的需求：让用户第一时间看到照片的大致轮廓，并尽可能快地看到清晰的原图。该方法采用缩略图与原图同时加载并叠加显示的策略，先加载缩略图并将其放大显示，大图则叠加在缩略图之上同步加载。由于缩略图体积较小，通常能迅速向用户展示照片的模糊效果；在大图加载过程中，大图从上往下逐步覆盖缩略图，从而让用户在加载过程中即可看到大图的逐步呈现。

（1）示例图

如上图所示，本方法的处理步骤如下： 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的语法，大家可以查看：《JavaScript 参考教程》、《JavaScript代码风格指南》，也希望大家多多支持本站。