现代网页应用中，图片已成为最常用的内容类型之一。虽然使用背景图片可以提升应用的视觉效果，但图片尺寸过大却会严重影响应用性能。
即使经过优化，图片仍然可能占用大量空间，导致用户等待时间过长。如果用户没有获得快速访问内容的体验，他们往往会失去耐心并转向其他网站，因此，高效的图片加载方案至关重要。
本文将介绍五种图片懒加载方法，帮助您优化网站，提升用户体验。这些方法适用于各种类型的图片，包括背景图片、内联图片和横幅图片。
关键要点
什么是懒加载？
图片懒加载意味着异步加载网站上的图片。可以在页面可见内容完全加载后，或仅当图片出现在浏览器视窗中时，按需加载内容。这意味着如果用户没有向下滚动到底部，页面底部的图片甚至不会被加载，从而最终提高应用程序性能。
对于大多数网站来说，了解如何在HTML中启用懒加载至关重要。例如，尝试浏览您最喜欢的包含高清照片的网站，您很快就会发现网站只加载了有限数量的图片。当您向下滚动页面时，占位符图片会迅速被实际图片替换。
例如，请注意Unsplash.com上的加载器：将页面该部分滚动到视图中会触发用全分辨率照片替换占位符：
为什么要实现图片懒加载？
了解如何懒加载图片对于优化网页性能至关重要，尤其是在包含大量视觉内容的页面上。以下是一些应该考虑为您的网站懒加载图片的理由：
1. 提升DOM加载时间
2. 节省带宽
懒加载图片有助于提高网站性能，但最好的方法是什么呢？
没有完美的方法。
如果您精通JavaScript，那么实现您自己的懒加载解决方案应该不成问题。没有什么比自己编写代码更能赋予您控制权了。
或者，您可以浏览网络以寻找可行的方法，或加入讨论论坛并分享想法。我做了同样的事情，并发现了这五种有趣的方法。
1. 原生懒加载
当用户滚动网页时，图片和iframe的原生懒加载是一种直接加载内容的方法。您只需要将loading="lazy"属性添加到您的图片和iframe即可。
<img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /> <iframe loading="lazy" src="content.html"></iframe></pre>登录后复制
如您所见，不需要JavaScript，也不需要动态替换src属性的值，只需使用普通的HTML即可。此方法是无需任何额外开销地在HTML中添加懒加载的完美示例。
“loading”属性使我们可以延迟加载屏幕外的图片和iframe，直到用户滚动到页面上的相应位置。“loading”可以取以下三个值中的任何一个：
此方法无可匹敌：它几乎没有额外开销，并且是干净简单的在HTML中懒加载图片的方法。但是，尽管大多数主流浏览器都很好地支持“loading”属性，但在撰写本文时，一些浏览器仍然缺乏完全的支持。
有关此HTML懒加载图片的强大功能（包括浏览器支持变通方法）的深入文章，请不要错过Addy Osmani的“Native image lazy-loading for the web!”。
2. 使用Intersection Observer API进行懒加载
Intersection Observer API是一个现代接口，您可以利用它来懒加载图片和其他内容。
以下是MDN对该API的介绍：
Intersection Observer API提供了一种异步观察目标元素与祖先元素或顶级文档视窗相交变化的方法。
换句话说，Intersection Observer API异步地监视一个元素与另一个元素的相交情况。
Denys Mishunov撰写了一篇关于Intersection Observer和使用它懒加载图片的优秀教程。以下是他的解决方案：
假设您想懒加载一个图片库。每个图片的标记如下所示：
<img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /> <iframe loading="lazy" src="content.html"></iframe></pre>登录后复制
在这里，图片的路径包含在data-src属性中，而不是src属性中。原因是使用src意味着图片会立即加载，这不是您想要的。
在CSS中，您可以为每个图片指定一个min-height值，例如100px。这会给每个图片占位符（没有src属性的img元素）一个垂直尺寸：
<img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>登录后复制
然后，在JavaScript文档中，您需要创建一个配置对象并使用intersectionObserver实例注册它：
img {
min-height: 100px;
/* more styles here */
}</pre>登录后复制最后，您可以迭代所有图片并将它们添加到此iterationObserver实例中：
// 创建配置对象：rootMargin和threshold是接口公开的两个属性
const config = {
rootMargin: '0px 0px 50px 0px',
threshold: 0
};
// 使用intersectionObserver实例注册配置对象
let observer = new IntersectionObserver(function(entries, self) {
// 迭代每个条目
entries.forEach(entry => {
// 只处理相交的图片。isIntersecting是接口公开的属性
if(entry.isIntersecting) {
// 将图片路径从data-src复制到src的自定义函数
preloadImage(entry.target);
// 图片现在已就位，停止观察
self.unobserve(entry.target);
}
});
}, config);</pre>登录后复制此解决方案的优点是易于实现、有效且具有相交性。Observer承担了计算方面的大部分工作。
在浏览器支持方面，除了IE 11和Opera Mini之外，所有主流浏览器在其最新版本中都支持Intersection Observer API。
您可以在Denys的文章中了解有关Intersection Observer API和此实现细节的更多信息。
3. Lozad.js
实现图片懒加载的快速简便的替代方法是让JS库为您完成大部分工作。
Lozad.js是一个高性能、轻量级且可配置的懒加载器，它使用纯JavaScript，没有任何依赖项。它是用户滚动时懒加载JavaScript、图片、视频和iframe的优秀工具。
您可以使用npm/Yarn安装Lozad，并使用您选择的模块打包器导入它：
const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
observer.observe(img);
});</pre>登录后复制npm install --save lozad yarn add lozad</pre>登录后复制
或者，您可以简单地使用CDN下载库，并将其添加到HTML页面底部的</pre>
lozad接下来，对于基本实现，请将类
import lozad from 'lozad';</pre>登录后复制
最后，在您的JS文档中实例化Lozad：
<img src="https://img.php.cn/upload/article/000/000/000/173897821885662.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>登录后复制
您可以在Lozad GitHub存储库中找到使用该库的所有详细信息。
如果您不想了解Intersection Observer API，或者您只是在寻找适用于各种内容类型的快速实现，那么Lozad是一个不错的选择。
4. 带模糊图片效果的懒加载
<script></code>标签中：</p> <pre class="brush:php;toolbar:false"><code class="language-html"><script src="https://cdn.jsdelivr.net/npm/lozad"></script>如果您是Medium的读者，您肯定注意到该网站是如何加载帖子中的主图片的。您首先看到的是图片的模糊低分辨率副本，而其高分辨率版本正在懒加载：
您可以通过将CSS和JavaScript结合使用，在HTML中懒加载图片时获得类似的效果。
您可以通过多种方式为图片添加这种有趣的模糊效果的懒加载。
我最喜欢的方法是Craig Buckler的方法。以下是此解决方案的所有优点：
您可以在“How to Build Your Own Progressive Image Loader”中阅读所有相关信息，并在项目的GitHub存储库中下载代码。
5. Yall.js
Yall.js是一个功能丰富的JavaScript库，它使用Intersection Observer API在用户滚动时懒加载JavaScript。它支持图片、视频、iframe，并在必要时巧妙地回退到传统的事件处理程序技术。
在文档中包含Yall时，您需要按如下方式初始化它：
<img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /> <iframe loading="lazy" src="content.html"></iframe></pre>登录后复制
接下来，要懒加载一个简单的img元素，您只需要在标记中执行以下操作：
<img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>登录后复制
请注意以下几点：
lazy添加到元素。src的值是一个占位符图片。data-src属性中。以下是Yall.js的优点：
要了解有关Yall.js可以提供的内容以及更复杂的实现的更多信息，请随时查看GitHub上的项目页面。
结论
这就是您可以开始在项目中试验和测试的五种图片懒加载方法。了解如何懒加载图片对于任何Web开发人员来说都是一项宝贵的技能。您可以通过加入此SitePoint论坛了解有关图片优化的更多技术或与他人分享您的专业知识。
关于图片懒加载的常见问题
什么是图片懒加载？
懒加载是一种Web开发技术，用于通过延迟加载某些元素（例如图片）来提高网页性能，直到需要它们为止。图片懒加载意味着只有当图片进入用户的视窗或在网页上可见时才加载图片，而不是在页面最初呈现时立即加载所有图片。
图片懒加载的好处是什么？
如何在HTML中懒加载图片？
要在HTML中为图片添加懒加载，您可以使用“loading”属性。“loading”属性是一个标准的HTML属性，允许您控制何时应加载图片。要启用HTML懒加载图片，请将“loading”属性的值设置为“lazy”，添加到img元素中。这会告诉浏览器只有当图片即将进入视窗时才加载它。这是一个示例：
<img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /> <iframe loading="lazy" src="content.html"></iframe></pre>登录后复制
图片懒加载好吗？
是的，在Web开发中使用懒加载图片HTML被认为是一种有益的做法，原因如下。它通过延迟加载非必需的图片加载来提高页面加载速度，从而加快初始页面渲染速度并改善用户体验。这种方法节省了带宽，对于具有有限数据计划或较慢互联网连接的用户来说是有利的。此外，它通过提高页面加载速度对搜索引擎优化（SEO）产生积极影响，并且符合渐进增强的原则。通过减少感知等待时间并在加载过程中提供视觉提示，懒加载有助于提供更流畅、更高效的浏览体验，尤其是在移动设备上。
如何知道图片是否已懒加载？
要确认您是否已正确实现如何在HTML中懒加载图片，您可以检查HTML源代码或使用浏览器开发者工具。通过右键单击图片并选择“检查”或“检查元素”，您可以在开发者工具面板中检查表示图片的img元素。查找img元素中是否存在“loading”属性。如果“loading”属性设置为“lazy”，则表示图片已配置为懒加载。使用浏览器开发者工具，您可以通过检查图片的属性来快速确定图片的懒加载状态。
如何使用JavaScript实现图片懒加载？
要使用JavaScript实现图片懒加载，您可以使用Lozad.js或Yall.js等库，或者您可以使用Intersection Observer API编写自己的自定义解决方案。这些库允许您通过监视元素何时进入视窗并在那一刻加载它们来按需加载内容。
图片懒加载会影响SEO吗？
是的，图片懒加载会对SEO产生积极影响。通过提高页面加载时间并减少最初需要加载的数据量，懒加载可以帮助您的网站在搜索引擎结果中获得更好的排名。更快的页面速度是像Google这样的搜索引擎已知的排名因素，而懒加载可以通过确保您的网站图片不会减慢整体性能来促进这一点。
原生懒加载和基于JavaScript的懒加载有什么区别？
原生懒加载依赖于浏览器对<img alt="5种懒惰加载图像以提高网站性能的技术" >和<iframe></iframe>标签中“loading”属性的内置支持。此方法简单，不需要额外的JavaScript。另一方面，基于JavaScript的懒加载（通常使用Lozad.js或Intersection Observer API等库实现）提供了更大的灵活性和自定义性。
图片懒加载有什么缺点吗？
主要的缺点是，当用户向下滚动页面时，图片可能会延迟加载。此外，一些旧版浏览器可能不支持懒加载。
我可以在WordPress中懒加载图片吗？
是的，您可以在WordPress中轻松懒加载图片。许多主题现在默认支持原生懒加载，但您也可以使用“Lazy Load by WP Rocket”或“Smush”等插件来实现懒加载，而无需任何编码。
以上是5种懒惰加载图像以提高网站性能的技术的详细内容。更多信息请关注PHP中文网其他相关文章！
