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

参考文章： 简书  

文中图片来源： 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); // 观察没一个图片对象
})

应用

	



	
图片来源于http://www.acgjc.com
	

		
	
	

		
	
	

		
	
	

		
	
	

		
	
	

		
	
	

		
	
	

		
	

	

效果

页面往下滚动

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