关于前端页面懒加载的用法

注：转载，原文：火头军人

https://mp.weixin.qq.com/s/JYglEGYN9tnGpDg7ARPx7w?scene=25#wechat_redirect

图片懒加载是一种网页优化技术。图片作为一种网络资源，在被请求时也与普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，将大大增加页面的首屏加载时间。为了解决这种问题，通过前后端配合，使图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏图片请求数的技术就被称为“图片懒加载”。

传统的解决方案

我们先来探讨一下传统的图片懒加载技术是如何实现的。

淘宝首页代码

如图是淘宝上的懒加载，

通过在tms-data中村粗的data文件，在用户下拉菜单后进行向后台发送api进行加载的行为。这种也是一个比较常见的懒加载方式。在用户加载过后将变成以下代码。

淘宝首页代码

可优化的一些点：

（1）滚动函数的节流

浏览器中的滚动事件是一个触发非常频繁的事件，有时候我们主观体验只是轻轻拨动了一下滚轮，但实际上触发了数次甚至数十次的onscroll事件：

还记得我们在前文所述的懒加载策略中提到，每次滚动事件都将执行：选择页面所有图片→遍历→筛选在当前视窗内的图片→加载真实图片与dom元素。以上过程是一个非常耗时的过程，尤其是在筛选符合条件的图片的步骤。因此，我们需要对滚动事件进行节流：只有当后一次触发滚动与前一次触发滚动的时间间隔大于一定阈值时，才认为这次滚动生效。

通俗地说，就是两次滚动事件之间必须大于一定的时间。这意味着用户在快速下滑页面时，筛选加载策略并不会执行，只有当用户停下或是逐渐放缓下滑速度时，才会进行筛选加载策略。若用jQuery实现上述节流步骤则如下所示（scroll事件节流阈值150ms,resize事件节流阈值100ms）：

设置函数执行间隔

顾名思义，预加载就是指预先加载一些未在当前视窗内，但是即将出现的一些图片。还是拿前文举的例子进行扩展：

可以看到，虽然当前视窗中只有3张图片，但若使用预加载，将提前加载前后各1屏幕内的图像（红色虚线内），如此一来，当用户在当前视窗内继续上滑或下滑时，该屏内的图片已经提前加载完毕，用户就不会感知到图片从白屏到显像的这种抖动过程，大大提升了用户体验。

更优的用户体验

在国内网站中，知乎官网在图片懒加载部分做得较为领先，拥有很好的用户体验。让我们先来看一下效果，随便打开一个知乎问答页（在PC环境中打开）：知乎问答页示例

效果图：

仔细观察，我们可以看到这样一种效果：图片在由白至清晰的过程中有一种模糊渐变的效果，相比于直接替换空白占位图的方案，这种方式不会给用户带来突兀感。

查看页面源代码，我们发现直出的页面中img标签是以这种形式存在的：

img标签及其内的信息作为字符串保存在noscript标签中，src中为一张低品质图片，data-original中为真实图片地址，同时有一个占位的span元素。当页面滚动到该noscript标签对应的位置时，解析出noscript标签中的img，并替换占位span元素：

此时将先加载低质量的小图，再加载清晰的高质量原图：

如此一来，用户将在极短的时间内就能看到图片的大致轮廓。随后等真实图片加载完毕后，再使用CSS控制图片逐渐变清晰，整个过程顺畅自然，一气呵成。在网速较差的环境下，这种方式也能有很优雅的降级体验。