概述
图片懒加载作为前端性能优化的内容，几乎我们每个前端er都应该掌握的技能。它的难点主要体现在两个方面。
- 判断图片出现在了当前视口 （即如何判断我们什么时候能够看到图片）
- 控制图片的加载
那废话不多说，我们直接开整吧！
方案一：位置计算 + 滚动事件 (Scroll) + DataSet API + getBoundingClientRect API
如何控制图片的加载
<img data-src="pistachio.jpg" />
首先设置一个临时 Data 属性 data-src，控制加载时使用 src 代替 data-src，可利用 DataSet API 实现
img.src = img.datset.src
如何判断图片出现在了当前视口
Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。示意图如下
那如何判断图片出现在了当前视口呢，根据示例图示意，代码如下，这个就比较好理解了。
// document.documentElement.clientHeight代表当前视口的高度
img.getBoundingClientRect().top < document.documentElement.clientHeight;
监听事件 window.scroll 也可以优化一下，工作中一般使用 lodash.throttle 就可以了。
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片懒加载</title>
<style>
* {
padding: 0;
margin: 0;
}
img {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div>
<img
src="https://cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg"
alt="1"
/>
<img
src="https://cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg"
alt="2"
/>
<img
data-src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg"
alt="3"
/>
<img
data-src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
alt="4"
/>
<img
data-src="https://cdn.pixabay.com/photo/2017/03/26/21/54/yoga-2176668_960_720.jpg"
alt="5"
/>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.js"></script>
<script>
const images = document.querySelectorAll("img");
const lazyLoad = () => {
images.forEach((item) => {
// 触发条件为img元素的CSSOM对象到视口顶部的距离 < 100px + 视口高度
// +100px是为了提前触发图片加载
const imgBCRTop = item.getBoundingClientRect().top
const visibleHeight = document.documentElement.clientHeight
// const
if (imgBCRTop < visibleHeight + 100) {
if ("src" in item.dataset) {
item.src = item.dataset.src;
}
}
});
};
document.addEventListener("scroll", _.throttle(lazyLoad, 200));
</script>
</body>
</html>
方案二：使用 content-visibility: auto；实现图片的延迟加载
content-visibility: 属性控制一个元素是否渲染其内容，它允许用户代理(浏览器)潜在地省略大量布局和渲染工作，直到需要它为止。
利用内容可见性的特性，我们可以实现如果该元素当前不在屏幕上，则不会渲染其后代元素。
content-visibility: auto Vs 图片懒加载
当然，其实使用 content-visibility: auto 并不能真正意义上实现图片的懒加载。这是因为，即便当前页面可视区域外的内容未被渲染，但是图片资源的 HTTP/HTTPS 请求，依然会在页面一开始被触发!
因此，这也得到了一个非常重要的结论:
- content-visibility: auto无法直接替代图片懒加载，设置了 content-visibility: auto 的元素在可视区外只是未被渲染，但是其中的静态资源仍旧会在页面初始化的时候被全部加载。因此，它更像是一个虚拟列表的替代方案。
方案二：IntersectionObserver API + DataSet API
如何判断图片出现在了当前视口
方案一使用的方法是: window.scroll 监听 Element.getBoundingClientRect() 并使用 _.throttle 节流。
但一系列组合动作太复杂了，于是浏览器出了一个三合一事件: IntersectionObserver API，一个能够监听元素是否到了当前视口的事件，一步到位！
事件回调的参数是 IntersectionObserverEntry 的集合，代表是否在可见视口的一系列值
其中，entry.isIntersecting 代表目标元素可见
const observer = new IntersectionObserver((changes) => {
// changes: 目标元素集合
changes.forEach((change) => {
// intersectionRatio
if (change.isIntersecting) {
const img = change.target;
img.src = img.dataset.src;
// 加载过以后停止监听
observer.unobserve(img);
}
});
});
images.forEach((img) => {
observer.observe(img);
});
当然，IntersectionObserver 除了给图片做懒加载外，还可以对单页应用资源做预加载。
方案三：使用LazyLoading 属性
这个是浏览器自己实现的懒加载功能，可以用在img或iframe标签上，只需要在标签上加上loading="lazy"属性就可以了，兼容性也还可以。
<img src="pistachio.jpg" loading="lazy" />
方案四：使用decoding="async"实现图片得异步解码
除了 loading=“lazy”，HTML5 还新增了一个非常有意思的属性增强图片的用户体验。那就是 decoding 属性。HTMLImageElement的 decoding 属性用于告诉浏览器使用何种方式解析图像数据。
它的可选取值如下：
- sync：同步解码图像，保证与其他内容一起显示。
- async: 异步解码图像，加快显示其他内容。
- auto: 默认模式，表示不偏好解码模式。由浏览器决定哪种方式更适合用户。
可以给图片同时添加上loading="lazy" 和 decoding="async"属性，可以显著提高性能
<img src="pistachio.jpg" loading="lazy" decoding="async" />
总结
本文介绍了实现图片懒加载的四种方式，相信我们通过本文的学习就能够对于图片懒加载有了深入的掌握。如果自己实现的话，建议采取方案二或者方案三。
1187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
