照片从模糊到清晰加载效果

 

如上如所示，本方法的处理步骤是：

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>