延迟加载图像以获得更好网站性能的五种方法第一种，您网站上的页面加载时间很容易成为一个问题。即使进行了适当的优化，图像也可能非常重。这会对访问者必须等待访问您网站上的内容的时间产生负面影响。除非你想出一个不影响速度感知的图像加载解决方案，否则不要管你的网站。在本文中，您将了解五种延迟加载图像的方法，您可以将这些图像添加到您的Web优化工具包中，以改善您网站上的用户体验。一、什么是延迟加载（LazyLoading）图片延迟加载指的是在网站上异步加载图片，即首屏内容加载完毕后，如果用户不向下滚动，则将图片放置在页面底部甚至不会被加载。许多网站都使用这种方法，但在图片较多的网站上尤为明显。当浏览您最喜爱的壁纸网站以获取高分辨率壁纸时，您很快就会意识到这些网站只能加载有限数量的图像。当您向下滚动页面时，您会看到占位符图像快速填充了用于预览的真实图像。2.为什么要关心延迟加载图片？以下是让您考虑为您的网站延迟加载图像的两个极其重要的因素：如果您的网站使用JavaScript来显示内容或向用户提供某种功能，那么快速加载DOM就变得至关重要。脚本通常在DOM完全加载之前不会开始运行。在图像密集型网站上，延迟加载（或异步加载图像）可能会影响用户是停留还是离开您的网站。由于大多数延迟加载解决方案仅在用户滚动到它们在视口中可见的点时才加载图像，如果用户从未到达该点，则永远不会加载这些图像。这转化为显着的带宽节省，因此，大多数用户，尤其是那些在连接速度较慢的移动设备上访问Web的用户，将获得非常好的用户体验。好吧，延迟加载图像有助于提高站点性能，但最好的方法是什么？没有完美的方法。如果您熟悉JavaScript，那么实施您自己的延迟加载解决方案应该不是问题。没有什么比自己编写代码更能给您控制权了。或者，您可以浏览Web以查找有效的方法并开始试验。我就是这样做的，并遇到了这五种有趣的技术。2.1NativeLazyLoading原生懒加载图片和iframe很爽。没有什么比下面的代码更直接的了如您所见，没有javascript，也没有动态交换src属性的值，只有纯HTML。loading属性让我们可以选择延迟屏幕外图像和iframe，直到用户滚动到页面上的某个位置。load可以取三个值之一：lazy：延迟加载eager：浏览器立即加载指定内容auto：将延迟加载或不延迟加载的选项留给浏览器。这种方法是无与伦比的：零开销、简洁明了。然而，虽然在撰写本文时大多数主要浏览器都对loading属性提供了良好的支持，但并非所有浏览器都支持。2.2IntersectionObserverAPIIntersectionObserverAPI是一个现代接口，您可以利用它延迟加载图像和其他内容。MDN是这样介绍这个API的：IntersectionObserverAPI提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。换句话说，异步观看的是一个元素与另一个元素的交集。DenysMishunov有一个关于IntersectionObserver和使用它延迟加载图像的很好的教程。这是他的解决方案。假设您想延迟加载图片库。每个图像的标记如下所示：请注意图像的路径是如何包含在data-src属性而不是src属性中的。原因是使用src意味着图像将立即加载，这不是您想要的。在CSS中，为每个图像分配一个最小高度值，例如100px。这为每个图像占位符（没有src属性的![]()
元素）提供了垂直尺寸：img{min-height:100px;/*morestyleshere*/}然后，在JavaScript文档中，创建一个Configure对象并将其注册到一个intersectionObserver实例：//创建配置对象：rootMargin和threshold//是接口暴露的两个属性constconfig={rootMargin:'0px0px50px0px',threshold:0};//使用intersectionObserverletobserver=newintersectionObserver(function(entries,self){//遍历每个条目entries.forEach(entry=>{//只处理相交的图像。//isIntersecting是接口公开的一个属性if(entry.isIntersecting){//自定义函数将路径复制到img//从data-src到srcpreloadImage(entry.target);//图像已经到位，停止观看self.unobserve(entry.target);}});},config);最后，遍历所有图像并将它们添加到此iterationObserver实例constimgs=document.querySelectorAll('[data-src]');imgs.forEach(img=>{observer.observe(img);});这个解决方案的优点：实现起来很容易，它有效，它让intersectionObserver在计算方面做了繁重的工作另一方面，它很大大多数浏览器都支持最新版本的IntersectionObserverAPI，但并非所有浏览器都始终支持支持API。幸运的是，polyfill是可用的。2.3Lozad.js图像延迟加载的一种快速简便的替代方法是让JS库为您完成大部分工作。Lozad.js是一个高性能、轻量级和可配置的纯JavaScript惰性加载器，没有任何依赖。您可以使用它来延迟加载图像、视频、iframe等，它使用IntersectionObserverAPI。您可以在npm/Yarn中包含Lozad.js并使用模块化导入它：npminstall--savelozadyarnaddlozadimportlozadfrom'lozad';或者，您可以简单地使用CDN下载库并将其添加到HTML页面底部的接下来，对于基本实现，将lozad类添加到html标签中：最后，在您的JS中实例化Lozad文档：constobserver=lozad();observer.observe();您将在LozadGitHub存储库中找到有关如何使用该库的所有详细信息。如果您不想深入了解IntersectionObserverAPI的工作原理，或者只是想快速实现各种内容类型，那么Lozad.js是一个不错的选择。只需注意浏览器支持，并最终将此库与IntersectionObserverAPI的polyfill集成。2.4带有模糊图像效果的延迟加载如果您是细心的读者，那么您一定已经注意到该网站是如何加载帖子中的主图像的。您首先看到的是图像的模糊、低分辨率副本，而它的高分辨率版本正在被延迟加载媒体网站上的高分辨率、延迟加载图像您可以延迟加载许多使用此图像的方式具有有趣的模糊效果。我最喜欢的技巧是CraigBuckler。以下是此解决方案的全部优势：性能：仅463B的CSS和1,007B的JavaScript代码支持视网膜屏幕无依赖性：不需要jQuery或其他库和框架逐步增强以抵消旧浏览器和JavaScriptFail2.5Yall.jsYall是用于图像、视频和iframe的功能丰富的延迟加载脚本。更具体地说，它使用IntersectionObserverAPI，并在必要时巧妙地使用传统的事件处理程序技术。在文档中包含yall时，需要初始化如下：接下来,要延迟加载一个简单的img元素，您需要在标记中做的就是：注意：将class="lazy"添加到元素src值是一个占位符图像路径，该图像路径指向要延迟加载的图像，放在data-src属性中Yall的好处包括：出色的性能IntersectionObserverAPI优秀的浏览器支持（回到IE11）不需要额外的依赖。
