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

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

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

所以,这就很有趣了,值得思考:

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

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

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

  • 必须同时支持 imgsource元素

loading 属性

loading属性有三个值。

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

  • eager - 立即加载资源。

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

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

现代的方法

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

标记图片

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

   Image description
复制代码

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

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

   
  
  
  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

你可能感兴趣的:(懒加载,图片,性能)