图片懒加载彻底指导（下）

懒加载具备不少的性能优点，好比一个页面中就要加载数百个产品图片的电子商务公司，懒加载可使其初始页面的加载时间获得显著的优化，同时还能下降传输带宽。但即使如此，依然有许多公司不曾采用，这是由于他们以为这不利于更好的用户体验——图片未加载时的占位很丑，感知等待时间久等。上一篇文章咱们详细介绍了图片懒加载的实现细节，因此这一篇咱们主要谈谈懒加载过程当中有关用户体验方面的一些问题。

1. 使用恰当的图片进行占位

占位指的是在真实图片加载出来以前，图片显示的位置上临时应当有所填充。一般，咱们常常会看到开发者会使用纯色块来占位，或者用一个图片占全部图片的位。为了追求使人更满意的用户体验，建议能够进行如下尝试：

1.1 主色占位

与千篇一概的使用一个固定颜色的色块占位，建议尝试用原始图片中的主色调进行占位，这个策略其实已经在百度图片和谷歌图片的搜索结果中使用了很长一段时间了

取图片主色看起来复杂，其实有一个简单的实现方式：先将图片压缩至1x1像素，而后再扩展到图片所需的占位宽高。

1.2 低分辨率图片占位

依然延续上面主色占位的思路，所不一样的是，此处可尝试使用原始图片的一个很是低分辨率，甚至是模糊的版本做为占位。这样不只看起来更为友好，并且还能给用户关于真实图片一些猜想，和稍后真实图片加载出来更为平滑的过分。这样的改进显然有更好的用户体验。

2. 为图片加载增长缓冲时间

在上一篇文章中，咱们讨论了触发图片加载的不一样方式时，所采用的时间点都是图片进入视窗的时间点，即在页面滚动过程当中，图片占位区域的上边缘到达视窗的下边缘时。这样的实现隐含了一个体验上的瑕疵：一般用户会快速地滚动页面，但触发图片加载后到显示在屏幕上还须要一段时间，并且采用事件绑定的实现方案出于节流的考虑，又为事件触发增长了一小段延迟。这些所形成的体验效果即是：咱们滚动页面当图片的占位区域出如今视窗中后，还须要再等一段时间（短则几十毫秒）图片才会显示出来，不能不说这是一个糟糕的体验。

这里来介绍另外一种优化的技巧：当图片占位距离出如今视窗中还有一段距离（好比500px）时，便开始触发加载，这就为了图片争取到了一小段预加载的时间。

对于事件绑定的触发方式，直接进行计算就好。而使用intersection observer API的方式能够经过配置root和rootMargin参数来设置触发距离，详情可参考MDN。

3. 避免内容异动

这篇文章咱们一直都默认，页面中使用图片的地方，即使它暂时未加载出真实的图片，也为他指定了占位空间的宽和高。这么作基于的考虑是这么一个场景，假设咱们不为图片事先指定占位空间的宽和高，那么在它加载展现出来以前的尺寸即是0x0像素的。那么当图片被加载出来后，页面原有的排版就会被图片撑开，而致使页面内容出现异动的体验。

这样突兀的感觉，对于体验来讲很不优雅。因此建议为图片设置肯定宽高的占位，以免图片忽然加载出来后产生的页面异动。

4. 不要对全部图片都懒加载

每当学会一个新的技术方法后，好像都会有种获得了放之四海而皆准的灵丹妙药，想要立马推广普及，而可能忽视了每种方法都有其限制条件。

假设咱们对页面中全部图片都施用懒加载，虽然会下降初始页面的加载时间，但页面顶部本应一上来就加载展现的图片，如今须要等JavaScript执行后才会加载。这显然不妥，那么到底哪些图片应当被懒加载呢，咱们能够依据以下一些原则：

1. 页面首屏中涉及的图片，不该看成懒加载。这些包括：logo，页面营销横幅，头部的一些图片等，另外考虑到移动设备与PC桌面不一样的显示尺寸，那么初始页面首屏中包括的图片数量也会有所不一样，因此在判断懒加载图片时也要将设备类型考虑在内。
2. 任何稍微偏离页面首屏视窗的图片，也都不该该被懒加载。这个稍微偏离的程度，能够根据页面特色去进一步设置，好比上面"为图片加载增长缓冲时间"一节中谈到的500px。
3. 对于整个页面满共也没几张图，用懒加载也不能得到多少明显收益的时候，也不建议使用。由于为了懒加载那很少的几张而增长的JavaScript代码量，两相抵消不划算。

5. 常见的实现库

虽然咱们在上一篇文章中已经详细介绍了懒加载的实现原理和过程，相信你也能依此在本身的项目中开发出懒加载功能。但使用社区成熟且通过验证的库来实现，或许是性价比最高的选择，固然若是你有重复造轮子的诉求，也能够本身动手丰衣足食。

下面罗列一些比较流行的懒加载库做为参考：

• yall.js
• lazysizes
• jQuery Lazy

6. 测试懒加载是否工做

当咱们实现完懒加载后，确定会想怎么来验证一下，页面上的图片是否如愿以偿。方法也很简单，Chrome浏览器下打开开发者工具以下：

带页面加载完后，咱们滚动页面，观察请求栏中是否有新的图片请求到来。

最后但愿对你们有帮助。