Intersection Observer 实现图片懒加载

效果展示：

图片懒加载

 IntersectionObserver API 使用教程 - 阮一峰的网络日志

 

假如HTML格式如上图所示，src值是默认图片，真正图片格式放在data-src里，我放了一百张图片，这里就不贴代码了

下面的js，非常简单

const ob = new IntersectionObserver((entries) => {
				console.log("交叉改变后运行", entries);
				for (let entry of entries) { //entries是观察范围内所有的元素
					if (entry.isIntersecting) { //这个字段可以拿到哪些元素是触发了交叉的
						let img = entry.target //拿到这个触发交叉的图片元素
						img.src = img.dataset.src //重新赋值src
						ob.unobserve(img) //图片已经触发过交叉，并且已经重新给src赋值过，就可以取消监听了
					}
				}
			}, {
				root: null, //表示你要观察的元素跟谁进行交叉，也就是父元素，假如你判断观察的元素跟视口的交叉的话，就填null(默认值)
				rootMargin: 0, //通过这个配置项，对交叉范围进行扩充或者收缩，假如是判断跟视口的交叉，那么这个值如果是10px,就代表距离视口10px时候就触发，默认值：0
				threshold: 0, //交叉的阈值取值是0-1，假如值是0.5，就代表观察的元素跟视口交叉到一半才会触发这个回调的执行
			})
			const imgs = document.querySelectorAll('img[data-src]') //拿到所有有自定义属性data-src的img标签
			imgs.forEach((img) => {
				ob.observe(img)
			})

资源下载：https://download.csdn.net/download/m0_57033755/88664684