图片懒加载IntersectionObserver

1、getBoundingClientRect

//获取图片元素
const images = document.querySelectorAll('img');
//scroll滚动事件
window.addEventListener('scroll',(e)=>{
    
     //判断每张图片的位置是否出现在可视区域
    images.forEach(image =>{
    
        //获取每张图片到顶部的距离
        const imTop = image.getBoundingClientRect().top;
        //距离小于窗口显示区的高度 ： 能够显示出来 可以加载
        if(imTop<window.innerHeight){
    
            //使用自定义属性data-src。在定义的时候：<img data-src="图片资源路径" >
            const data_src = image.getAttribute('data-src');//获取自定义属性
            image.setAttribute('src',data_src);//赋值给原本的的src属性，这样就显示了
        };
        //即使图片加载了还是会不断触发事件，非常消耗资源
        console.log("触发");
    })
})

优化：使用浏览器提供的构造函数IntersectionObserver。

//获取图片元素
const images = document.querySelectorAll('img');
//定义callback函数 接受的参数是数组
const callback =(entries)=>{
    
    entries.forEach(entry=>{
    
        //isIntersecting属性为true时，说明到可视区域了 可以显示出来
        if(entry.isIntersecting){
    
        //target属性 就是目标元素
        const image = entry.target;
        const data_src = image.getAttribute('data-src')
        image.setAttribute('src',data_src);
        //显示出来后取消 观察 这个动作。不再观察了
        obser.unobserve(image);
        console.log('触发');
        }
    })
}
//回调函数callback一般触发两次 ,目标元素能看见 触发一次，目标元素看不见了 触发一次
const obser = new IntersectionObserver(callback);
images.forEach(image =>{
    
    //xxx.observe(DOM节点) 观察每个img节点
    obser.observe(image);
})