物联网|五种延迟加载图像以提高网站性能的方法

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

为什么要关心延迟加载图像？您应该考虑为您的网站延迟加载图像至少有几个很好的理由：

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

好吧，延迟加载图像有助于提高网站性能，但最好的方法是什么？
没有完美的方法。
如果您熟悉JavaScript ，那么实现您自己的延迟加载解决方案应该不是问题。没有什么比自己编写代码更能控制你的了。
或者，您可以浏览Web以寻找可行的方法并开始试验它们。我就是这样做的，并遇到了这五种有趣的技术。
#1 原生延迟加载图像和iframe的原生延迟加载非常酷。没有什么比下面的标记更直接了：
<img src=https://mparticle.uc.cn/"myimage.jpg\" loading=\"lazy\" alt=\"...\" /> <iframe src=https://mparticle.uc.cn/"content.html\" loading=\"lazy\"></iframe>
如您所见，没有 JavaScript ，没有动态交换src属性值，只是普通的旧 HTML 。
该loading属性为我们提供了延迟屏幕外图像和iframe的选项，直到用户滚动到他们在页面上的位置。 loading可以采用以下三个值中的任何一个：

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

这种方法没有竞争对手：它的开销为零，干净简单。然而，尽管在撰写本文时，大多数主要浏览器都对loading属性有很好的支持，但并非所有浏览器都支持。
有关延迟加载图像的这项出色功能（包括浏览器支持变通方法）的深入文章，请不要错过 Addy Osmani 的“网络原生图像延迟加载”！。