懒加载图片以获取最佳性能的最佳方案

图片懒加载是一个很受欢迎的优化站点的方法，因为它很容易实现，并且能明显提升性能。使用 惰性加载，我们可以异步加载图片，这意味着可以只加载浏览器视口内的图片。 大约一年前，图像和 iframe的原生惰性加载特性已发布，但是仅针对 谷歌和其他主流浏览器。该功能的重点是使浏览器可以控制何时请求图像或 iframe资源，这使得开发工作更加容易。在此前，唯一的选择是使用 JavaScript插件来监视视口更改并动态加载资源。现在，浏览器也可以原生支持（懒加载）。

在写此文时候（原文在 dev.to上是2020年8月31日发布）,大约 73% of currently used browsers支持这个特性，这还不赖。但是，我们不想让 27%的潜在用户无法访问和使用网站的图片资源。

所以，这就很有趣了，值得思考：

• 对于支持原生懒加载特性的浏览器，我们想直接使用它

• 对于不支持原生懒加载特性的浏览器，我们使用 JS插件

• 根据浏览器对原生懒加载特性支持与否，考虑是否引入 JS插件

• 必须同时支持 img和 source元素

loading 属性

loading属性有三个值。

• auto - 默认值。和不设置 loading属性效果一样。

• eager - 立即加载资源。

• lazy - 一旦资源在视口就加载它

尽管上面的取值有特定的使用案例，但是，我们通常希望对折叠以上（视口）的资源使用 eager，对折叠以下的资源使用 lazy。

现代的方法

我们需要编写一个脚本，该脚本将在 HTML文档后运行。我们使用了 Jekyll，并将脚本作为 HTML的部分添加在 body的末尾。这是运行 JavaScript函数以避免渲染阻塞的最有效方法。

标记图片

我们希望 JavaScript函数基于浏览器原生支持的特性来开启图像加载过程。为此，我们将图像的路径添加到 data-src而不是 src。但是我们不应该将 src留空，因此我们将使用 1 x 1px透明图像占位符。我们对 img元素标记如下所示：

   <img 
  src="/path/to/placeholder/image.png"
  data-src="/path/to/full/image.jpg"
  alt="Image description"
  class="lazyload"
  loading="lazy"
/>
复制代码

⚠️ class="lazyload"是给懒加载后备插件使用的。我使用了此特定类名的插件 lazysizes

另外，我们想支持 picture元素，它包含多个 source元素并且 img元素作为后备元素。

   <picture>
  <source data-srcset="path/to/image.webp" type="image/webp" />
  <source data-srcset="path/to/image.jpg" />
  <img loading="lazy" 
    class="lazyload"
    src="path/to/placeholder/image.png"
    data-src="path/to/image.jpg"
    alt="Image description"
  />
picture>
复制代码

特性检测

我们需要检测用户的浏览器是否支持原生的懒加载。幸运的是，我们可以直接使用 JavaScript去做这件事。

   if ("loading" in HTMLImageElement.prototype) {
  /* Native lazy loading is supported */
 } else {
  /*  Native lazy loading is not supported */
 }
复制代码

最终JavaScript代码

对于 原生懒加载，我们只需要对 img分配 data-src值给 src值，对 source分配 data-srcset值给 srcset值，剩下的事情就交给浏览器了。

对于 不支持该特性的浏览器，我们只需要加载相关的 JavaScript插件，可选的，如果没有自动化集成的，那么就运行该插件。我习惯使用 lazysizes，但是任何懒加载插件都会生效，前提是保证元素的标记要正确（比如类名，data元素等）。

于是，最终的 JavaScript的代码会看起来长这样：

   
复制代码

本文截取 Best way to lazy load images for maximum performance部分翻译，进行学习和总结。懒加载在商城站点和运营活动的场景使用更加频繁，当然，图片还要进行最优压缩、切割和CDN处理等。更多博文内容详见 Jimmy Blog