图片懒加载

1.事件监听：监听scroll事件，鼠标滚动就触发

这种方法会多次触发，不推荐使用，推荐使用下面的IntersectionObserver

2.IntersectionObserver：

按字面意思就是交叉观察，也就是目标元素和可视窗口会产生交叉区域，观察交叉区域发生什么事情，执行什么程序

const images = document.querySelectorAll("img")
// 传给intersecObserver的回调函数
// 在目标元素能看见时触发一次,目标元素看不见了时再触发一次
const observer = new IntersectionObserver(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)
        }
    })
})

images.forEach(image => {
    observer.observe(image)
})

3.直接给标签添加属性loading="lazy"

目前只有chrome支持