针对网络慢或大图加载导致的白屏问题，本文介绍一种基于JavaScript的图片渐进式加载方案。通过同时加载缩略图与原图，利用CSS定位将原图叠加在拉大的缩略图上，实现用户先见模糊轮廓、后见清晰细节的流畅体验，有效改善查看照片时的等待焦虑。
背景介绍与现状分析
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代码风格指南》，也希望大家多多支持本站。