一、 图片懒加载原理
图片懒加载一般就是滚动视图的时候，当图片出现在可视区域动态加载图片，所以可以拆成两个问题
- 如何判断图片进入可视窗口
- 如何控制图片的加载
二、 解决方案
- 方案一：getBoundingClientRect API + DataSet API + Scroll + throttle（节流）
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
</head>
<style>
.box {
height: 200px;
margin-bottom: 20px;
border: 1px solid red;
}
</style>
<body>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
<img
id="img"
data-src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500"
/>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
</body>
<script>
let imgId = document.getElementById('img')
window.onscroll = _.throttle(function () {
if (
imgId.getBoundingClientRect().top <
document.documentElement.clientHeight
) {
imgId.src = imgId.dataset.src
}
}, 500)
</script>
</html>
- 方案二：IntersectionObserver API + DataSet API
IntersectionObserver()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
</head>
<style>
.box {
height: 200px;
margin-bottom: 20px;
border: 1px solid red;
}
</style>
<body>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
<img
id="img"
data-src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500"
/>
<div class="box">aaaa</div>
<div class="box">aaaa</div>
</body>
<script>
let imgId = document.getElementById('img')
var observer = new IntersectionObserver((event) => {
// isIntersecting 元素是否出现在视窗内
if (event[0].isIntersecting) {
const img = event[0].target
img.src = img.dataset.src
// 停止监听
observer.unobserve(img)
}
})
// 开始监听
observer.observe(imgId)
</script>
</html>
- 方案三： LazyLoading 属性
<img src="图片" loading="lazy" />
