关于intersectionObserver实现页面图片懒加载

intersectionObserver是一个实用的web api，可以用来监控指定元素和视窗有交互时发生的回调，说白了就是当页面里的某个元素进入浏览器屏幕或者离开时候你想干嘛，这个特性极适合实现懒加载(也可以监听页面scroll事件，这是另一种方法)。

给所有的图片一个data-src保存图片真正的链接

var img = document.querySelectorAll('[data-src]')

var iso=new IntersectionObserver(callfn)

function callfn(entries){

    entries.forEach((item)=>{

        if(item.isIntersecting){

            item.target.src=item.target.dataset.src

            iso.unobserve(item.target)

        }

    })

}

imgs.forEach((item)=>{

    iso.observe(item)

})