图片懒加载

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

废话不多说 直接撸代码

第一种 使用 IntersectionObserver()API

		//获取所有带自定义属性的img
       const imgs = document.querySelectorAll('img[data-src]')
       //	定义IntersectionObserver(callback,options)的options参数
       /*	options 可选
					一个可以用来配置observer实例的对象。如果options未指定，observer实例默认使用文档视口作为
					root，并且没有margin，阈值为0%（意味着即使一像素的改变都会触发回调函数）。你可以指定以下
					配置：
			root
					监听元素的祖先元素Element对象，其边界盒将被视作视口。目标在根的可见区域的的任何不可见部分
					都会被视为不	可见。
			rootMargin
					一个在计算交叉值时添加至根的边界盒(bounding_box (en-US))中的一组偏移量，类型为字符串
					(string)，可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和CSS 中的margin 属
					性等同; 可以参考 The root element and root margin in Intersection Observer API来深入了
					解margin的工作原理及其语法。默认值是"0px 0px 0px 0px"。
			threshold
					规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组0.0到1.0之间的数
					组。若指定值为0.0，则意味着监听元素即使与根有1像素交叉，此元素也会被视为可见. 若指定值为
					1.0，则‘’意味着整个元素都在可见范围内时才算可见。可以参考Thresholds in Intersection 
					Observer API 
					来深入了解阈值是如何使用的。阈值的默认值为0.0。
		*/
        const options= {
            rootMargin: '0px',
            threshold: 0
        }
        let observer = new IntersectionObserver((entries, self) => {
        // 		entries  是所有图片的集合   self   是当前处于可视区域的自身元素
            entries.forEach(entry => {
          	//	使用forEach遍历   
          	// 	entry.isIntersecting元素是否进入可视区域  进入为true，未进入为false
                if (entry.isIntersecting) {
                //	如果进入就获取当前元素
                    let img = entry.target
                    //	获取当前图片的额自定义属性src
                    let src = img.dataset.src
                    //	判断src属性是否存在   如果存在就赋值   不存在说明没有地址
                    if (src) {
                    	//	设置一个定时器
                        setTimeout(() => {
                        //	让img的src=src
                            img.src = src
                            //	然后再移除它自身绑定的src   
                            img.removeAttribute('data-src')
                        }, 300);
                    }
                    //	消除
                    self.unobserve(entry.target)
                }
            })
        }, options)
        //	为每一个img都绑定IntersectionObserver
        imgs.forEach(img => {
            observer.observe(img)
        })