图片懒加载

方法一：事件监听
监听scroll鼠标滚动事件，鼠标滚动就触发。
需要知道两个高度，一个是窗口显示区的高度，可以用window.innerHeight来获取，其次是图片到视窗上边的距离(高度)可以用元素的getBoundingClientRect().top来获取。
如果图片还未看见，也就是说图片距离视窗顶部的距离大于窗口显示区的高度。
如果图片可以看见，也就是说图片距离视窗顶部的距离小于窗口显示区的高度。
进而问题就转换成了图片是否出现在可视区域内，如果在，就显示图片，反之则不显示

// 获取所有的图片
const images = document.querySelectorAll('img');window.addEventListener('scoll',(e)=>{images.forEach(image => {const imageTop = image.getBoundIngClientRect().top;if(imageTop < window.innerHeight ){// 也就是说已经在屏幕内了，所以图片可以开始加载了const data_src = image.getAttribute('data-src');image.setAttribute('src',data_src)}    })
})

但是这样会出现一个问题，就是会频繁出发scroll事件，所以不行。
为什么要使用自定义属性？
如果到了窗口区域，那么图片就准备开始加载，如果用户还没滚动到指定的位置，就不加载图片。使用自定义属性，浏览器碰到这个属性的时候是不会像默认属性那样进行属性处理的，因此我们可以把图片img里的src属性改为data-src，这样就相当于不知道要在哪里下载这些图片了

IntersectionObserver是浏览器提供的构造函数，可以直接拿来使用，但是前提是浏览器能够支持，部分浏览器版本不兼容。
目标元素和可视窗口会产生交叉区域，交叉区域发生了什么事情，我们需要执行什么事情

const images = document.querySelectorAll('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 );}})
}const observer = new IntersectionObserver( callback ) // 接收一个回调函数作为参数
images.forEach( image =>{// 接收所有图片后，对每张图片进行遍历observer.observe( image )
})