图片懒加载

原理： 先将图片的真实地址存储在自定义属性上面，所有图片的src设置一个默认的占位符，页面滚动时判断这些图片是否达到了可视范围之内，达到了就将这些图片的真实地址放入到src，浏览器会自动加载图片

html

 <ul>
    <li><img src="" data-trueSrc="./img/1.jpg" alt=""></li>
    <li><img src="" data-trueSrc="./img/2.jpg" alt=""></li>
    <li><img src="" data-trueSrc="./img/3.jpg" alt=""></li>
    <li><img src="" data-trueSrc="./img/4.jpg" alt=""></li>
    <li><img src="" data-trueSrc="./img/1.jpg" alt=""></li>
    <li><img src="" data-trueSrc="./img/2.jpg" alt=""></li>
    <li><img src="" data-trueSrc="./img/3.jpg" alt=""></li>
    <li><img src="" data-trueSrc="./img/4.jpg" alt=""></li>
  </ul>

js

<script>
    // 在浏览器的范围可视范围之内的图显示出来
    var imgs = document.images
    var curIndex = 0
    function showImg() {
      // 已经加载过得不需要再处理
      for(var i=curIndex; i<imgs.length; i++ ){
        console.log(imgs[i].offsetTop)

        // 滚动出去的距离
        var dis = document.documentElement.scrollTop || document.body.scrollTop

        if(imgs[i].offsetTop < window.innerHeight + dis) {
          console.log('在浏览器里面')
          imgs[i].src = imgs[i].getAttribute('data-trueSrc')
          curIndex = i                // 下一次就从上一次结束的位置开始
        }
      }
    }

    showImg()

    window.onscroll = function() {
      showImg()
    }