利用浏览器自带的IntersectionObserver构造函数来实现懒加载

 

const imgs = document.querySelectorAll('img')

        const callback = enteries => {//enteries:数组,里面放置了每一张图片的对象
            enteries.forEach(entry => {
                if (entry.isIntersecting) {//利用每一张图片对象的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)//创建观察实例对象,并调用回调函数callback

        imgs.forEach(image => {
            observer.observe(image)//利用observer实例调用observe方法观察每一张图片
        })