basics-of-javascript
/
12、图片懒加载.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            height: 200px;
            display: block;
        }
    </style>
</head>
<body>
<img src="" data-src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<img src="" data-src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<img src="" data-src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<img src="" data-src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<img src="" data-src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<img src="" data-src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<img src="" data-src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</body>
<script>
  class Lazy {
    constructor() {
      this.imgList = document.querySelectorAll('img')
      this.lazyLoad()
      window.addEventListener('scroll', this.throttle(() => {
        this.lazyLoad()
      }, 200))
    }

    destroy() {
      window.removeEventListener('scroll', this.throttle(() => {
        this.lazyLoad()
      }, 200))
    }

    throttle(fn, wait = 1000) {
      let timer = null;
      return function () {
        if (!timer) {
          timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
          }, wait)
        }
      }
    }

    lazyLoad() {
      const H = document.documentElement.clientHeight;
      const S = document.documentElement.scrollTop || document.body.scrollTop;
      Array.from(this.imgList).forEach(img => {
        if (H + S + 100 > img.offsetTop) {
          console.log(4)
          img.src = img.dataset.src
        }
      })
    }
  }

  new Lazy()
</script>
</html>