JavaScript图片懒加载的优化方法详解

<ul>
    ......
    <li>2222222222</li>
    <li>2222222222</li>
    <li>2222222222</li>
    <li>2222222222</li>
    <li>2222222222</li>
    <li>2222222222</li>
    /*先用data-自定义标签，使图片先不加载*/
    <img data-src="./img1.jpg" height="200px"><br>
    <img data-src="./img2.jpg" height="200px" alt=""><br>
    <img data-src="./img3.jpg" height="200px" alt="">
</ul>

let img = document.querySelectorAll('img')
window.addEventListener('scroll',() => {
	img.forEach((item) => {
		//若图片顶部高度小于视窗高度
		if(item.getBoundingClientRect().top < window.innerHeight) {
			const data_src = item.getAttribute('data-src')
			//则将自定义属性data-src赋值给src属性
			item.setAttribute("src",data_src)
		} 
	})
	console.log("scroll触发了");  //此方法：若加载很多内容，就会导致任务的堆积，影响整体效率
})

let img = document.querySelectorAll('img')
//此回调：目标能看见触发一次；目标元素看不见了又触发一次
const callback = (entries) => {   //接收一个数组作为参数，数组每一项都和目标元素相关，比如		isIntersecting判断目标元素是否被观察到了，又比如target属性代表该目标元素
    entries.forEach((item) => {
        //若该目标元素被观察到了
        if(item.isIntersecting) {
            const img = item.target //目标元素
            const data_src = img.getAttribute('data-src')
            img.setAttribute('src',data_src)
            observer.unobserve(img)  //observer.unobserve(DOM节点)  取消观察某DOM节点
        }
        console.log('触发');
    })
}
const observer = new IntersectionObserver(callback)
//遍历所有img，使得所有img被观察
img.forEach((item) => {
    observer.observe(item)  //observer.observe(DOM节点)  观察哪个DOM节点
})