图片懒加载图片懒加载就是延迟加载，我们都知道浏览器的可视范围是有限的如果网页有很多图片是非常吃流量的，如果用户还没有看到

图片懒加载就是延迟加载，我们都知道浏览器的可视范围是有限的如果网页有很多图片是非常吃流量的，如果用户还没有看到网页下面的内容那就没有必要这么快加载这些看不见的图片，等到滚动到网页下面再展示图片。

通过监听窗口的滚动事件，再获取窗口的可视高度及图片所在位置距离窗口顶部的距离，如果图片距窗口顶部的距离小于窗口高度则加载图片否则不加载。

该方法的缺点是scroll事件会一直被触发，非常消耗资源。

window.addEventListener('scroll', (e) => {
    document.querySelectorAll('img).forEach(image => {
        const imageTop = image.getBoundingClientRect().top
        if (imageTop < window.innerHeight) {
             //data-src为自定义属性
            image.setAttribute('src', image.getAttribute('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)
            observe.unobserve(image)
        }
    })
    
}
const observe = new intersectionObserver(callback)
images.forEach(image => {
    observe.observe(image)
})