仅自己记录一个demo,详细了解可以查看IntersectionObserver文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
list-style: none;
float: left;
}
img:not([src]) {
opacity: 0;
transition: opacity .3s ease;
/* 这个很重要,当图片没有src属性的时候,赋值默认宽高占位,否则所有img将都会出现在视口 */
min-width: 220px;
min-height: 420px;
}
img[src] {
opacity: 1;
}
</style>
</head>
<body>
<div style="width: 700px;height:4000px;margin :0 auto; background: #6d6c6c;">
<ul>
<li><img class="lazy-image" data-src="./OIP-C.jpg"></li>
<li><img class="lazy-image" data-src="./OIP-C (1).jpg"></li>
<li><img class="lazy-image" data-src="./OIP-C (2).jpg"></li>
<li><img class="lazy-image" data-src="./OIP-C (3).jpg"></li>
<li><img class="lazy-image" data-src="./OIP-C (4).jpg"></li>
<li><img class="lazy-image" data-src="./OIP-C (5).jpg"></li>
<li><img class="lazy-image" data-src="./OIP-C (6).jpg"></li>
<li><img class="lazy-image" data-src="./OIP-C (7).jpg"></li>
<li><img class="lazy-image" data-src="./OIP-C (8).jpg"></li>
<li><img class="lazy-image" data-src="./OIP-C (9).jpg"></li>
<li><img class="lazy-image" data-src="./OIP-C (10).jpg"></li>
<li><img class="lazy-image" data-src="./OIP-C (11).jpg"></li>
<li><img class="lazy-image" data-src="./OIP-C (12).jpg"></li>
<li><img class="lazy-image" data-src="./OIP-C (13).jpg"></li>
<li><img class="lazy-image" data-src="./th.jpg"></li>
<li><img class="lazy-image" data-src="./th (1).jpg"></li>
<li><img class="lazy-image" data-src="./th (2).jpg"></li>
<li><img class="lazy-image" data-src="./th (3).jpg"></li>
<li><img class="lazy-image" data-src="./th (4).jpg"></li>
<li><img class="lazy-image" data-src="./th (5).jpg"></li>
</ul>
</div>
</body>
<script>
const ob = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
console.log('交叉')
setTimeout(() => {
const img = entry.target
img.src = img.dataset.src
ob.unobserve(img)
}, 200)
}
}
}, {
root: null, // 监听相对于哪个元素的变化,默认为浏览器视口
rootMargin: '0px', // 相对于根元素的额外边距
threshold: 0.5 // 交叉比例阈值,0~1之间
});
const imgs = document.querySelectorAll('.lazy-image');
imgs.forEach((img) => {
if (!img.src) {
ob.observe(img); // 开始观察每个目标元素
}
});
</script>
</html>