关于：# IntersectionObserver
IntersectionObserver 接口（从属于 Intersection Observer API）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。
当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。
贴代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片懒加载</title>
<style>
img {
width: 300px;
height: 300px;
background: #f0f0f0;
margin-bottom: 20px;
}
</style>
</head>
<body>
<img data-src="https://picsum.photos/800/600?random=1" src="https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6e383e8606bd483fb71841bf42f3de7f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ZCR5LiK55qE5bCP6I-c6bih:q75.awebp?rk3s=f64ab15b&x-expires=1775209548&x-signature=lKXgxHSeIYfvmht9bZv3AI57qlw%3D" alt="Image 1">
<img data-src="https://picsum.photos/800/600?random=2" src="https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6e383e8606bd483fb71841bf42f3de7f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ZCR5LiK55qE5bCP6I-c6bih:q75.awebp?rk3s=f64ab15b&x-expires=1775209548&x-signature=lKXgxHSeIYfvmht9bZv3AI57qlw%3D" alt="Image 2">
<img data-src="https://picsum.photos/800/600?random=3" src=".https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/6e383e8606bd483fb71841bf42f3de7f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ZCR5LiK55qE5bCP6I-c6bih:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiODk2ODM3Mjc2NDAzMTEyIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740822199&x-orig-sign=%2FsGEc1gJkq3jlPN0h25378DHZVg%3D" alt="Image 3">
<img data-src="https://picsum.photos/800/600?random=4" src="https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6e383e8606bd483fb71841bf42f3de7f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ZCR5LiK55qE5bCP6I-c6bih:q75.awebp?rk3s=f64ab15b&x-expires=1775209548&x-signature=lKXgxHSeIYfvmht9bZv3AI57qlw%3D" alt="Image 4">
<img data-src="https://picsum.photos/800/600?random=5" src="https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6e383e8606bd483fb71841bf42f3de7f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ZCR5LiK55qE5bCP6I-c6bih:q75.awebp?rk3s=f64ab15b&x-expires=1775209548&x-signature=lKXgxHSeIYfvmht9bZv3AI57qlw%3D" alt="Image 5">
<script>
let images = document.querySelectorAll("img[data-src]");
const intersectionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting) { // // 图片进入可视区域
const src = entry.target.getAttribute('data-src');
entry.target.setAttribute('src', src); // 设置图片的src属性
observer.unobserve(entry.target); // 停止观察当前图片
}
})
})
images.forEach(image =>{
intersectionObserver.observe(image) // 观察每一张图片
})
</script>
</body>
</html>
