图片懒加载

const imgs = [...document.getElementsByTagName('img')];

if(IntersectionObserver){
    // IntersectionObserver ，可以自动"观察"元素是否可见
    let lazyLoadObser = new IntersectionObserver((entries)=>{
        console.log(entries);
        entries.forEach((item)=>{
            let lazyImgs = item.target;
            // console.log(lazyImgs)
            //interpRatio：目标元素的可见比例，即interpRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
            if(item.intersectionRatio > 0){
                lazyImgs.src = lazyImgs.getAttribute('data-src');
                //unobserve 停止观察
                lazyLoadObser.unobserve(lazyImgs)
            }
        })
    })
    for(var i = 0;i<imgs.length;i++){
        //实例的observe方法可以指定观察哪个 DOM 节点
        //observe 开始观察
        lazyLoadObser.observe(imgs[i])
    }
}