<!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>3.IntersectionObserver API + DataSet API</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<img data-src="https://cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg" alt="1" />
<img data-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/2014/12/15/17/16/boardwalk-569314_960_720.jpg" alt="3" />
<img data-src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg" alt="4" />
<img data-src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="5" />
<img data-src="https://cdn.pixabay.com/photo/2017/03/26/21/54/yoga-2176668_960_720.jpg" alt="6" />
<img data-src="https://cdn.pixabay.com/photo/2015/03/17/14/05/sparkler-677774_960_720.jpg" alt="7" />
<script>
//获取所有的img标签
const images = document.querySelectorAll('img')
//3、调用回调函数,进行处理
// 回调函数有一个参数(数组)图片都放在了数组entries
const callback = entries => {
entries.forEach(entry => {
// 当有图片进入可视区,
if (entry.isIntersecting) {
//观察到的目标图片
const image = entry.target;
//显示图片
const data_src = image.getAttribute('data-src')
image.setAttribute('src', data_src)
console.log('触发')
}
});
}
//1、调用IntersectionObserver构造函数,里面有一个回调函数作为参数,
//2、callback触发的条件就是观察到有图片载入的时候
const observer = new IntersectionObserver(callback)
images.forEach(image => {
observer.observe(image)
})
</script>
</body>
</html>
07-25
201
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)