实现图片懒加载

<img src="/img/loading.png" data-src="/img/1.png" />
<img src="/img/loading.png" data-src="/img/2.png" />
<img src="/img/loading.png" data-src="/img/3.png" />
<img src="/img/loading.png" data-src="/img/4.png" />
<img src="/img/loading.png" data-src="/img/5.png" />
<img src="/img/loading.png" data-src="/img/6.png" />
<img src="/img/loading.png" data-src="/img/7.png" />
<img src="/img/loading.png" data-src="/img/8.png" />

一、设置 img 标签 loading=“lazy”

延迟加载未出现在屏幕上的img 和 iframe标签，直到用户滚动到它们附近

二、获取img元素，判断滚动位置进行加载

function LazyLoadImg(){
	window.onscroll = function(){
		const imgDoms = document.getElementsByTagName('img[data-src]')
		imgDoms.forEach(i=>{
			if(i.getBoundingClientRect().top < window.innerHeight){
				i.setAttribute('src',i.getAttribute('data-src'))
				removeAttribute('data-src')
			}
		})
	}
}

三、IntersectionObserver方法监听元素是否进入可视区域

function LazyLoadImg(){
	const observers = new IntersectionObserver(function(i){
		if(i.isIntersecting){
			const dom = i.target
			dom.setAttribute('src',dom.getAttribute('data-src'))
			observers.unobserve(dom)
		}
	})
	const imgDoms = document.getElementsByTagName('img[data-src]')
	imgDoms.forEach(i=>{
		observers.observe(i)
	})
}