图片懒加载

首先：搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
1.clientHeight、scrollTop 和 offsetTop

 <img src="loading.gif" data-src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg" alt="">
  <img src="loading.gif" data-src="https://cdn.pixabay.com/photo/2014/08/01/00/08/pier-407252_1280.jpg" alt="">
  <img src="loading.gif" data-src="https://cdn.pixabay.com/photo/2014/12/15/17/16/pier-569314_1280.jpg" alt="">
  <img src="loading.gif" data-src="https://cdn.pixabay.com/photo/2010/12/13/10/09/abstract-2384_1280.jpg" alt="">
  <img src="loading.gif" data-src="https://cdn.pixabay.com/photo/2015/10/24/11/09/drop-of-water-1004250_1280.jpg"
>
 var img = document.getElementsByTagName("img");
    var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
    lazyload(); //页面载入完毕加载可是区域内的图片
    // 节流函数，保证每200ms触发一次
    function throttle(event, time) {
      let timer = null;
      return function (...args) {
        if (!timer) {
          timer = setTimeout(() => {
            timer = null;
            event.apply(this, args);
          }, time);
        }
      }
    }
    window.addEventListener('scroll', throttle(lazyload, 200))
    function lazyload() { //监听页面滚动事件
      var seeHeight = window.innerHeight; //可见区域高度
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
      for (var i = n; i < img.length; i++) {
        console.log(img[i].offsetTop, seeHeight, scrollTop);
        if (img[i].offsetTop < seeHeight + scrollTop) {
          if (img[i].getAttribute("src") == "loading.gif") {
            img[i].src = img[i].getAttribute("data-src");
          }
          n = i + 1;
        }
      }
    }

2.getBoundingClientRect

//现在我们用另外一种方式来判断图片是否出现在了当前视口, 即 DOM 元素的 getBoundingClientRect API。
//上述的 lazyload 函数改成下面这样:

    function lazyload() { //监听页面滚动事件
      var seeHeight = window.innerHeight; //可见区域高度
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
      for (var i = n; i < img.length; i++) {
        console.log(img[i].getBoundingClientRect().top, seeHeight, scrollTop);
        if (img[i].offsetTop < seeHeight + scrollTop) {
          if (img[i].getAttribute("src") == "loading.gif") {
            img[i].src = img[i].getAttribute("data-src");
          }
          n = i + 1;
        }
      }
    }

3.IntersectionObserver

 if (IntersectionObserver) {
      let lazyImageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry, index) => {
          let lazyImage = entry.target;
          // 如果元素可见            
          if (entry.intersectionRatio > 0) {
            if (lazyImage.getAttribute("src") == "loading.gif") {
              lazyImage.src = lazyImage.getAttribute("data-src");
            }
            lazyImageObserver.unobserve(lazyImage)
          }
        })
      })
      for (let i = 0; i < img.length; i++) {
        lazyImageObserver.observe(img[i]);
      }
    }