JavaScript懒加载

方法一

通过浏览器提供的InterSectionObserver构造函数，来观察目标与视口是否有交叉，来决定是否让img有src。
　　使用方法：
　　　　1、new 一下并传入一个回调 （当滚动会触发这个回调并会传入观察目标的信息，例如是否交叉、目标源）
　　　　2、设置观察目标

      // entrys 是一个数组 关于每张图片的信息 可以获取到是否交叉等信息
      let callback = entrys => {
        entrys.forEach((entry)=>{
          // 是否交叉 交叉则设置src属性
          if(entry.isIntersecting) {
            const image = entry.target;
            const data_src = image.getAttribute('data-src');
            image.setAttribute('src', data_src);
          }
        })
      }
      // 创建一个观察对象 并传入一个回调函数 当滚动屏幕时 触发callback
      let observer = new IntersectionObserver( callback );
      for(let img of imgs) {
        // 设置观察对象
        observer.observe(img);
      }

方法二

　　监听滚动条scroll
　　当滚动页面时我们利用getBoundingClientRect().top 来获取目标对象离视口上方的距离
　　然后我们可以根据这个距离来判断我们的元素是否在视口区内
　　如果元素离视口上的距离小于视口高，说明在视口区内，则给予img的src属性

 window.addEventListener('scroll', (e)=> {
        imgs.forEach(img => {
          if(img.getBoundingClientRect().top < window.innerHeight) {
            const data_src = img.getAttribute('data-src');
            img.setAttribute('src', data_src);
          }
        })
      })