延迟加载图片怎么设置

延迟加载图片怎么设置？最简单一种方法是通过添加loading=“lazy属性实现浏览器加载，此外还可以借助交叉观察器API和Lozad.js设置图片延迟加载，以实现WordPress优化。有的商家可能还云里雾里的，所以下文将展示延迟加载图片是什么、为什么及怎么设置的内容，以供大家参考。

一、延迟加载图片是什么

延迟加载图片是指使用一组技术仅加载访问者当前正在查看的图像。 可以在首屏内容完全加载后在滚动时延迟加载内容，或者当它只需要出现在浏览器的视口中时有条件地加载内容。这意味着，如果用户不一直向下滚动，放置在页面底部的图像甚至不会被加载，最终提高外贸独立站程序性能。

二、为什么要设置延迟加载图片

网站页面的负载主要包括图片、脚本、模板、文本样式和记录。在任何情况下，图片占正常网站页面大小的60%以上。

在没有增强的情况下，客户端的互联网浏览器会在完全交付页面之前下载每一个资产。这会导致负担时间延长，从而导致个人离开。WooCommerce曾发布过一项统计，每提高100毫秒的页面速度，一个外贸独立站就可以获得1%的收入。

在这种情况下，采取必要的步骤来减少网站加载时间是很有希望的，此外由于图片是页面大小的重要支撑，因此从图片开始是一个明智的想法。在这里延迟加载可能成为最重要的因素。

1、改善 DOM 加载时间

如果网站使用 JavaScript 来显示内容或向用户提供某种功能，那么快速加载 DOM 就变得至关重要。脚本通常会等到 DOM 完全加载后再开始运行。在具有大量图像的网站上，延迟加载（或异步加载图像）可能会决定用户留下或离开网站的重要因素。

2、节省资源

仅当访客需要时才会处理延迟图像，这减少了立即跳出或不向下滚动的用户在页面上传递的总字节数。如果用户的 CDN 提供商根据数据传输和 HTTP 请求收费，那么延迟加载实际上可以为商家节省成本。对于使用有限数据计划的访问者来说更是如此。

三、延迟加载图片怎么设置

1、原生（浏览器级）延迟加载-最简单的选择

目前该种方法支持Chrome、Edge、Opera、Firefox等主要的流行浏览器。使用浏览器延迟加载，只需要在HTML标记中的img标签中添加一个值为lazy的加载属性，即loading=“lazy”。这样用户无需JavaScript、API或计算，就可以告诉浏览器哪些图像要需延迟加载。

<img src="image.jpg" alt="Example Image" loading="lazy">

不幸的是，这种方法也有一些缺点。它缺乏浏览器支持，例如Chrome完全支持它，但Firefox和Safari分别提供部分支持和不支持。而且不适用于背景图像，即使在 Chrome 中也是如此，如此一来用户仍然需要编写一些 JavaScript。

2、Intersection Observer API

交叉观察器API提供了一种异步检测目标元素与祖先元素或顶级文档的视口相交情况变化的方法，换句话说，Intersection Observer API 异步监视一个元素与另一个元素的交集。

假设想延迟加载图像，每个图像的标记如下所示：

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

在这里，图像的路径包含在 data-src 属性中，而不是 src 属性中，原因是使用 src 意味着图像会立即加载。

在 CSS 中，可以为每个图像指定一个最小高度值，比如 100px。这为每个图像占位符（没有 src 属性的 img 元素）提供了一个垂直维度：

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

然后在 JavaScript 文档中，需要创建一个配置对象并将其注册到 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);
});

该解决方案的优点是实施起来轻而易举有效，并且具有交叉点，缺点是不支持 IE 11 和 Opera Mini。

3、Lozad.js

实现图像延迟加载的一个快速简便的替代方法是让 JS 库完成大部分工作。

Lozad.js 是一个高性能、轻量级且可配置的延迟加载器，它使用没有依赖关系的纯 JavaScript，是在用户滚动图像、视频和 iframe 时延迟加载 JavaScript 的绝佳工具。

可以使用 npm/Yarn 安装 Lozad，并使用选择的模块打包器导入它：

npm install --save lozad
yarn add lozad
import lozad from 'lozad';

或者可以简单地使用 CDN 下载库，并将其添加到 HTML 页面底部的 < 脚本>标签中：

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

接下来将图片标签中的 src 属性替换为 data-src：

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

最后在 JS 文档中初始化 Lozad：

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

推荐阅读：

《六大WordPress图像优化插件评测》

《提高商品转化率之必备图片SEO优化技巧》

《网站代码优化的内容有哪些及优化方法？》