延迟加载图片提高济南网站建设性能的五种方法！

即使经过适当的优化，图像也可能占很大比例。这可能会对访问者等待访问您网站上的内容的时间产生负面影响。除非你想出一个不干扰速度感知的图像加载解决方案，否则他们可能会耐心地导航到其他地方。

在本文中，您将了解延迟加载图像的五种方法，这些方法可以添加到Web优化工具包中，以改善网站上的用户体验。

什么是延迟装货？

图像的延迟加载指的是图像在网站上的异步加载——也就是说，在第一个屏幕内容完全加载之后，甚至有条件地，只有当它们出现在浏览器的视口中时。这意味着如果用户没有完全向下滚动，页面底部的图像甚至不会被加载。

很多网站都用这种方法，但在图片多的网站上尤其明显。试着浏览你最喜欢的在线猎场获取高分辨率照片，你很快就会意识到网站是如何只加载有限数量的图像的。当您向下滚动页面时，您将看到占位符图像快速填充真实图像以供预览。例如，请注意下图中的加载器：将页面的这一部分滚动到视图中会触发用全分辨率照片替换占位符：

我为什么要关心延迟加载图像？

至少有两个很好的理由说明为什么您应该考虑延迟为您的网站加载图像：

如果你的网站使用JavaScript来显示内容或者给用户提供一些功能，那么快速加载DOM是非常重要的。脚本通常在DOM完全加载后才会运行。在包含大量图像的网站上，延迟加载(或异步加载图像)可能会导致用户以不同的方式停留或离开您的网站。

由于大多数惰性加载解决方案仅在用户滚动到图像在视口中可见的位置时才加载图像，因此如果用户从未到达该点，这些图像将永远不会被加载。这意味着节省大量带宽。为此，大部分用户，尤其是在移动设备上访问Web，连接慢的用户，会非常感谢。

嗯，延迟加载图片会有助于提高网站的性能，但是最好的解决方案是什么呢？

没有完美的方法。

如果你生活和呼吸JavaScript，实现自己的延迟加载解决方案就不会有问题。没有什么比编写自己的代码更能让你控制局面了。

或者，你可以浏览网页，找到可行的方法，开始实验。我就是这么做的，遇到了这五个有趣的技术。

# 1本机延迟装载

图像和iframe的本地延迟加载非常酷。没有什么比下面这个标记更直接的了：

img src=" my image . jpg " loading=" lazy " alt="…"/

iframe src=" content . html " loading=" lazy "/iframe

如你所见，没有JavaScript，没有src属性值的动态交换，只有普通的旧HTML。

loading属性允许我们选择延迟屏幕外图像和iframe，直到用户滚动到页面上的位置。加载可以采用以下三个值之一：

懒：非常适合延迟加载

急切：指示浏览器立即加载指定的内容

自动：保留延迟加载或不延迟加载到浏览器的选项。

这种方法无可比拟：成本为零，简单明了。然而，尽管大多数主流浏览器在撰写本文时为这个加载属性提供了很好的支持，但并不是所有浏览器都支持这个特性。

关于延迟加载图像这个可怕功能的深入文章，包括浏览器支持的解决方案，请不要错过Addy Osmani的“延迟加载网络上的本地图像！”。

# 2使用交叉观察器应用编程接口的延迟加载

交集观察者API是一个现代的接口，可以利用延迟加载图片等内容。

MDN对该应用编程接口的介绍如下：

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

换句话说，异步监控是一个元素和另一个元素的交集。

Denys Mishunov有一个很好的关于“交集观察者”的教程，用它来加载延迟的图像。这是他的解决方案。

假设你想延迟加载图片库。每个图像的标记如下：

img data-src=" image . jpg " alt=" test image "

请注意，图像的路径是如何包含在data-src属性中而不是src属性中的。原因是使用src意味着图像会被立即加载，这不是你想要的。

在CSS中，给每个图像一个最小高度值，比如100px。这为每个图像占位符(没有src属性的img元素)提供了垂直尺寸：

img {

最小高度： 100 px；

/*此处有更多样式*/

}

然后，在JavaScript文档中，创建一个配置对象，并将其注册到intersectio IO

nObserver实例：

// 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 lozad

yarn add lozad

import lozad from ‘lozad’;

另外，您可以简单地使用CDN下载该库并将其添加到HTML页面底部的< script>标记中：

<script src=”https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js”></script>

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

<img class=”lozad” data-src=”img.jpg”>

最后，在您的JS文档中实例化Lozad：

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

您将在Lozad GitHub存储库中找到有关如何使用该库的所有详细信息。

如果您不想深入了解Intersection Observer API的工作原理，或者只是在寻找适用于各种内容类型的快速实现，则Lozad是一个不错的选择。

仅注意浏览器支持，并最终将此库与用于Intersection Observer API的polyfill集成。

＃4延迟加载具有模糊的图像效果
如果您是中型读者，那么您肯定已经注意到该网站如何在帖子中加载主图像。

您首先看到的是图像的模糊，低分辨率副本，而其高分辨率版本则被延迟加载：

中型网站上的占位符图片模糊

中等网站上的高分辨率，延迟加载的图像
您可以通过多种方式来延迟加载具有这种有趣的模糊效果的图像。

我最喜欢的技术是Craig Buckler。这是此解决方案的全部优点：

性能：仅463字节的CSS和1,007字节的最小JavaScript代码
支持视网膜屏幕
无依赖关系：不需要jQuery或其他库和框架
逐步增强功能以??抵消较旧的浏览器和JavaScript失败
您可以在“?如何构建自己的渐进式图像加载器”中阅读有关它的全部信息，并在项目的GitHub存储库上下载代码。

＃5 Yall.js
Yall是功能丰富的延迟加载脚本，用于图像，视频和iframe。更具体地说，它使用Intersection Observer API并在必要时巧妙地使用传统的事件处理程序技术。

在文档中包含Yall时，需要按以下方式对其进行初始化：

<script src=”yall.min.js”></script>
<script>
document.addEventListener(“DOMContentLoaded”, yall);
</script>

接下来，要延迟加载一个简单的img元素，在标记中需要做的就是：

<img class=”lazy” src=”placeholder.jpg” data-src=”image-to-lazy-load.jpg” alt=”Alternative text to describe image.”>

请注意以下几点：

您将懒惰的类添加到元素
的值src是一个占位符图像
您要延迟加载的图像的路径在data-src属性内部
Yall的好处包括：

Intersection Observer API的出色性能
出色的浏览器支持（可回溯到IE11）
无需其他依赖项