图片预加载和懒加载原理和实现

  const imgs = document.querySelectorAll('img'); //获取全部图片元素
  const winInner = window.innerHeight; //可视界面的高度

  function scrollFun() {
    imgs.forEach((img) => {
      const imgScrollTop = img.offsetTop; //图片距离文档顶部的距离
      const bodyScrollTop = document.body.scrollTop || document.documentElement.scrollTop; //浏览器滚动的长度
      if (imgScrollTop < winInner + bodyScrollTop) { //当图片距离文档顶部的距离小于可视界面的高度+浏览器滚动的长度时加载对应的图片
        img.setAttribute('src', img.getAttribute('data-src'));
      }
    })
  }
  
  window.onscroll = scrollFun;