图片懒加载 #

<script>
	// 获取图片结点
      const imgs = document.querySelectorAll('img');
      // 获取视口宽度
      const viewHeight = window.innerHeight || document.documentElement.clientHeight;
      // 已经加载完的图片数量
      let num = 0;
      function lazyload(){
        for(let i = num; i < imgs.length; i++){
	    // 获取图片距离视口顶部的距离
          const distance = viewHeight - imgs[i].getBoundingClientRect().top;
          // 当处在可视范围内时，赋值src属性
          if(distance >= 0){
            imgs[i].src = imgs[i].getAttribute('data-src');
            num = i + 1;
          }
        }
      }
      // 节流函数
      function debounce(fn,interval){
        let timer = null;
        return function(...args){
          if(timer) clearTimeout(timer);
          timer = setTimeout(()=>{
            fn.call(this,...args);
          },interval);
        }
      }

      // 是的页面初始化是加载首屏图片
      window.onload = lazyload;
      // 监听Scroll事件，为了防止频繁调用，使用防抖函数优化一下
      window.addEventListener("scroll", debounce(lazyload, 600), false);
</script>