图片懒加载

什么是图片懒加载：
图片懒加载顾名思义就是在当前网页中滑动页面到能看到图片的时候再去加载图片。
实现：
1，判断图片出现在了当前视口（位置计算+滚动事件）
2，控制图片加载：图片不在显示位置时给图片设置一个占位图，当图片进入可视区域时，再给img的src属性赋值真正的图片地址。
作用：减少服务端压力。

<p>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <p>22222222222222222222222222222</p>
    <img data-src="1.webp">
    <img data-src="1.webp">
    <img data-src="1.webp">
    <p>1111111111111111111111111111111111</p>
    <p>2222222222222222222222222222222222222</p>

实现一：

    <script>
        const imgs=document.querySelectorAll('img');
        window.addEventListener('scroll',(e)=>{
            imgs.forEach(img=>{
                const imgTop=img.getBoundingClientRect().top;
                if(imgTop<window.innerHeight){
                    const data_src=img.getAttribute('data-src');
                    img.setAttribute('src',data_src);
                }
                console.log('scroll触发次数');
            })
        })
    </script>

实现二：

    <script>
        const imgs=document.querySelectorAll('img');
        const callback=entries=>{
            entries.forEach(entry=>{
                if(entry.isIntersecting){
                    const img=entry.target;
                    const data_src=img.getAttribute('data-src');
                    img.setAttribute('src',data_src);
                    observer.unobserve(img);
                    console.log('触发');
                }
            })
        }
        const observer=new IntersectionObserver(callback);
        imgs.forEach(img=>{
            observer.observe(img);
        })
    </script>