使用IntersectionObserver接口进行图片懒加载

最新推荐文章于 2024-03-25 13:16:16 发布

ChauncyWu

最新推荐文章于 2024-03-25 13:16:16 发布

阅读量997

点赞数 1

分类专栏： javascript HTML5 文章标签：懒加载

本文链接：https://blog.csdn.net/chauncywu/article/details/99072044

版权

javascript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

参考文章：简书

文中图片来源： 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>

效果

页面往下滚动

可以看见，一开始，页面中可见范围中有三张图片，后台网络也是确实只有三次请求。随着页面往下滚动，浏览器依次进行图片请求。且已加载的不会再请求。可见这样是符合懒加载的效果的。

ChauncyWu

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
使用IntersectionObserver接口进行图片懒加载

参考文章：简书文中图片来源：http://www.acgjc.com[MDN] IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。也就是说，这是用来监听页面中模块可见区域的。...
复制链接

扫一扫