参考文章: 简书
文中图片来源: http://www.acgjc.com
[MDN] IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。
也就是说, 这是用来监听页面中模块可见区域的。
懒加载代码如下
let imgList = document.querySelectorAll('img'); // 获取页面中所有img对象
let observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0 && entry.intersectionRatio <= 1) {
// intersectionRatio 表示相交区域和目标元素的比例值
// 也可以用sIntersecting 目标元素当前是否可见 Boolean值 可见为true
entry.target.src = entry.target.dataset.src
// 图片进入进入可见区域, 则赋予data-src值给src属性
observer.unobserve(entry.target)
// 图片已加载, 解除观察
}
})
})
imgList.forEach(img => {
observer.observe(img); // 观察没一个图片对象
})
应用
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.list {
width: 500px;
height: 300px;
margin: 20px;
}
.img {
width: 100%;
height: 300px;
}
</style>
<body>
<div>图片来源于http://www.acgjc.com</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/183dc2537018c3e8934c819251c72136-1024x576.jpg" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/90cfb81aebc76a0fad7d311800fdbff2-1024x576.jpg" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/3685ffdd022374d80d5a5b0a1830146c-1024x553.jpg" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/e62c330f09a9c86a6b3471850b22957b-1024x512.jpg" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/c374b5e14e5f36fc76ff6485782fd6d8-1-1024x473.jpg" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2018/07/7255d9b1da818860b351d67762b59029-1024x576.png" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2018/07/9d94d1b3710caafc47d956c9b78cb636-1024x768.jpg" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2018/07/04f614a8a2c31c009dacfa04965474b4-1024x769.jpg" class="img">
</div>
<script type="text/javascript">
let imgList = document.querySelectorAll('.img')
let observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0 && entry.intersectionRatio <= 1) {
entry.target.src = entry.target.dataset.src
observer.unobserve(entry.target)
}
})
})
imgList.forEach(img => {
observer.observe(img)
})
</script>
</body>
</html>
效果
页面往下滚动
可以看见, 一开始, 页面中可见范围中有三张图片, 后台网络也是确实只有三次请求。随着页面往下滚动, 浏览器依次进行图片请求。且已加载的不会再请求。可见这样是符合懒加载的效果的。