5种延迟加载图像以提高网站性能的方法合集

由于图像是网络上最受欢迎的内容类型之一，网站上的页面加载时间很容易成为一个问题。
即使经过适当优化，图像的重量也会相当大。这可能会对访问者在访问你网站上的内容之前必须等待的时间产生负面影响。很有可能，他们会变得不耐烦并在其他地方导航，除非你想出一个不影响速度感知的图像加载解决方案。
延迟加载图像的方法有哪些？在本文中，你将了解五种延迟加载图像的方法，你可以将这些方法添加到你的 Web 优化工具包中，以改善你网站上的用户体验。
什么是延迟加载？延迟加载图片意味着在网站上异步加载图片——也就是说，在首屏内容完全加载之后，或者甚至有条件地，只有当它们出现在浏览器的视口中时。这意味着如果用户不一直向下滚动，放置在页面底部的图像甚至不会被加载。
许多网站都使用这种方法，但在图片较多的网站上尤为明显。尝试浏览你最喜欢的在线猎场以获取高分辨率照片，你很快就会意识到该网站如何仅加载有限数量的图像。当你向下滚动页面时，你会看到占位符图像快速填充真实图像以供预览。例如，注意Unsplash.com上的加载器：将页面的该部分滚动到视图中会触发用全分辨率照片替换占位符：

文章图片

如何实现延迟加载图像

为什么要关心延迟加载图像？你应该考虑为你的网站延迟加载图像的原因至少有几个：

如果你的网站使用 JavaScript 来显示内容或向用户提供某种功能，那么快速加载 DOM 就变得至关重要。脚本通常要等到 DOM 完全加载后才开始运行。在拥有大量图像的网站上，延迟加载（或异步加载图像）可能会影响用户停留或离开你的网站。
由于大多数延迟加载解决方案仅在用户滚动到图像在视口内可见的位置时才加载图像，因此如果用户从未到达该点，则永远不会加载这些图像。这意味着带宽的大量节省，大多数用户，尤其是那些通过移动设备和慢速连接访问 Web 的用户，都会感谢你。

【5种延迟加载图像以提高网站性能的方法合集】好吧，延迟加载图像有助于提高网站性能，但最好的方法是什么？
没有完美的方法。
如何实现延迟加载图像？如果你生活和呼吸 JavaScript，那么实现你自己的延迟加载解决方案应该不是问题。没有什么比自己编写代码更能控制你的了。
或者，你可以浏览 Web 以寻找可行的方法并开始试验它们。我就是这样做的，并遇到了这五种有趣的技术。
#1 原生延迟加载延迟加载图像的方法有哪些？图像和 iframe 的原生延迟加载非常酷。没有什么比下面的标记更直接了：

< img src="https://www.lsbin.com/myimage.jpg" alt="5种延迟加载图像以提高网站性能的方法合集" loading="lazy" alt="..." /> < iframe src="https://www.lsbin.com/content.html" loading="lazy">< /iframe>

如你所见，没有 JavaScript，没有动态交换src属性值，只是普通的旧 HTML。
延迟加载图像实例解析：该loading属性使我们可以选择延迟屏幕外图像和 iframe，直到用户滚动到他们在页面上的位置。loading可以采用以下三个值中的任何一个：

lazy: 非常适合延迟加载
eager: 指示浏览器立即加载指定的内容
auto: 保留延迟加载或不延迟加载到浏览器的选项。

这种方法没有竞争对手：它的开销为零，干净简单。然而，尽管在撰写本文时，大多数主要浏览器都对loading属性有很好的支持，但并非所有浏览器都支持。
有关延迟加载图像的这项出色功能（包括浏览器支持变通方法）的深入文章，请不要错过 Addy Osmani 的“ Web 原生图像延迟加载！”。
#2 使用 Intersection Observer API 延迟加载该Intersection Observer API是一个现代化的界面，你可以利用的延迟加载图片和其他内容。
下面是 MDN 介绍这个 API 的方式：

Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。

换句话说，被异步观察的是一个元素与另一个元素的交集。
Denys Mishunov 有一个关于 Intersection Observer 和使用它的延迟加载图像的很棒的教程。这是他的解决方案的样子。
如何实现延迟加载图像？假设你想延迟加载图片库。每个图像的标记如下所示：

< img data-src="https://www.lsbin.com/image.jpg" alt="5种延迟加载图像以提高网站性能的方法合集" alt="test image">

请注意图像的路径如何包含在data-src属性中，而不是src属性中。原因是 usingsrc意味着图像会立即加载，这不是你想要的。
在 CSS 中，你为每个图像赋予一个min-height值，例如100px. 这为每个图像占位符（没有 src 属性的 img 元素）提供了一个垂直维度：

img { min-height: 100px; /* more styles here */ }

在 JavaScript 文档中，然后创建一个config对象并将其注册到一个intersectionObserver实例：

// create config object: rootMargin and threshold // are two properties exposed by the interface const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; // register the config object with an instance // of intersectionObserver let observer = new intersectionObserver(function(entries, self) { // iterate over each entry entries.forEach(entry => { // process just the images that are intersecting. // isIntersecting is a property exposed by the interface if(entry.isIntersecting) { // custom function that copies the path to the img // from data-src to src preloadImage(entry.target); // the image is now in place, stop watching self.unobserve(entry.target); } }); }, config);

延迟加载图像实例：最后，你遍历所有图像并将它们添加到此iterationObserver实例中：

const imgs = document.querySelectorAll('[ data-src]'); imgs.forEach(img => { observer.observe(img); });

该解决方案的优点：实施起来轻而易举，有效，并且可以在intersectionObserver计算方面进行繁重的工作。
另一方面，尽管大多数浏览器的最新版本都支持 Intersection Observer API，但并非所有浏览器都一致支持。幸运的是，有一个polyfill 可用。
你可以在Denys 的文章中了解有关 Intersection Observer API 和此实现的详细信息的更多信息。
#3 Lozad.js延迟加载图像的方法有哪些？实现图像延迟加载的一种快速简便的替代方法是让 JS 库为你完成大部分工作。
Lozad 是一个高性能、轻量级和可配置的纯 JavaScript 惰性加载器，没有依赖项。你可以使用它来延迟加载图像、视频、iframe 等，并且它使用 Intersection Observer API。
你可以将 Lozad 包含在 npm/Yarn 中，并使用你选择的模块打包器导入它：

npm install --save lozadyarn add lozad

import lozad from 'lozad';

或者，你可以简单地使用 CDN 下载库并将其添加到 HTML 页面底部的

<
 script>

标签中：

< script src="http://img.readke.com/220421/12045421I-4.jpg">< /script>

接下来，对于基本实现，将类lozad添加到标记中的资产：

< img class="lozad" data-src="https://www.lsbin.com/img.jpg" alt="5种延迟加载图像以提高网站性能的方法合集">

如何实现延迟加载图像：最后，在你的 JS 文档中实例化 Lozad：

const observer = lozad(); observer.observe();

你将在Lozad GitHub 存储库上找到有关如何使用该库的所有详细信息。
如果你不想深入研究 Intersection Observer API 的工作原理，或者你只是在寻找适用于各种内容类型的快速实现，那么 Lozad 是一个不错的选择。
只是，请注意浏览器支持，并最终将此库与 Intersection Observer API 的 polyfill 集成。
#4 图像模糊效果的延迟加载如果你是Medium读者，你肯定已经注意到该站点如何在帖子中加载主图片。
你首先看到的是图像的模糊、低分辨率副本，而其高分辨率版本正在延迟加载：

文章图片

Medium 网站上的占位符图像模糊

文章图片

Medium 网站上的高分辨率、延迟加载的图像

你可以通过多种方式延迟加载具有这种有趣模糊效果的图像。
延迟加载图像实例：我最喜欢的技巧是 Craig Buckler 的。这是此解决方案的所有优点：

性能：只有 463 字节的 CSS 和 1,007 字节的缩小 JavaScript 代码
支持视网膜屏幕
无依赖：不需要 jQuery 或其他库和框架
逐步增强以抵消旧浏览器和失败的 JavaScript

你可以在如何构建自己的渐进式图像加载器中阅读所有相关内容，并在项目的GitHub 存储库上下载代码。
#5 Yall.js延迟加载图像的方法有哪些？Yall 是一个功能丰富的延迟加载脚本，用于图像、视频和 iframe。更具体地说，它使用 Intersection Observer API，并在必要时巧妙地使用传统的事件处理程序技术。
在你的文档中包含 Yall 时，你需要按如下方式对其进行初始化：

< script src="https://www.lsbin.com/yall.min.js">< /script> < script> document.addEventListener("DOMContentLoaded", yall); < /script>

如何实现延迟加载图像：接下来，要延迟加载一个简单的img元素，你只需在标记中执行以下操作：

< img class="lazy" src="https://www.lsbin.com/placeholder.jpg" alt="5种延迟加载图像以提高网站性能的方法合集" data-src="https://www.lsbin.com/image-to-lazy-load.jpg" alt="5种延迟加载图像以提高网站性能的方法合集" alt="Alternative text to describe image.">

请注意以下事项：