图片懒加载

图片懒加载

图片懒加载其实就是延迟加载，浏览器可视范围有限。
1）事件监听，监听scroll这个事件，鼠标滚动就触发。
window.innerHeight窗口显示区高度
getBoundingClientRect().top 图片到视窗上边的距离

const images=document.querySelectorAaa('img');
window.addEventLister('scroll',e=>{
	images.forEach(img=>{
		const imageTop=img.getBoundingClientRect().top;
		if(imageTop<window.innerHeight){
			const data_src=image.getAttribute('data-src')
			image.setAttribute('src',data_src)
		}
	})
})

data-，浏览器碰到这个属性不会像默认属性那样进行属性处理的将src属性改为data-src属性，这样相当于不知道要在哪里下载这些图片了
页面加载很多内容就会导致任务的堆积，而且即使图片已经加载了还是会不断触发事件
2） intersectionObserver
intersectionObserver是浏览器提供的构造函数，目标元素和可视窗口会产生交叉区域

const images=document.querySelectorAaa('img');
const callback=entries=>{
	entries.forEach(entry=>{
		if(entry.isIntersecting){//是否在可视区域
			const image=entry.target;
			const data_src=image.getAttribute('data-src');
			image.setAttribute('src',data_src);
			observer.unobserve('image');
			console.log()
		}
	})
}
const observer=new IntersectionObserver(callback);
image.forEach(image=>{
	observer.observe(image);
})