原生JS实现图片懒加载

作者: puxiaotaoc | 来源:发表于2018-09-14 11:38 被阅读5次

图片懒加载
原生JS实现图片懒加载
原生JS实现图片懒加载
原生 JS 实现图片懒加载
原生js实现图片懒加载
原生JS实现图片懒加载(lazyload)
原生js 图片懒加载
原生js 图片懒加载
JS 原生图片懒加载
js实现图片懒加载

(1) 图片距离文档顶部的高度: img.offsetTop
(2) 返回窗口文档显示区的高度: window.innerHeight
(3) 返回文档的可见高度：document.documentElement.clientHeight
(3) 滚动条滚动的高度: document.body.scrollTop || document.documentElement.scrollTop

加载图片的判断条件:
图片距离顶部的距离 < 浏览器滚动条滚动的高度 + 浏览器窗口的高度

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS懒加载</title>
  <style>
    img{
      width: 1002px;
      height: 300px;
      display: block;
    }
  </style>
</head>

<body>
  <div class="imgLazyload">
    <img src="" data-src="photo_01.jpeg">
    <img src="" data-src="photo_02.jpeg">
    <img src="" data-src="photo_03.jpeg">
    <img src="" data-src="photo_04.jpeg">
    <img src="" data-src="photo_01.jpeg">
    <img src="" data-src="photo_02.jpeg">
  </div>

    <script type="text/javascript">
      var imgList = document.getElementsByTagName('img');
      var n = 0;
      window.onscroll = function() {
        var seeHeight = document.documentElement.clientHeight;
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        for (var i = n; i < imgList.length; i++) {
          if (imgList[i].offsetTop < seeHeight + scrollTop) {
            if (imgList[i].getAttribute('src') == '') {
              imgList[i].src = imgList[i].getAttribute('data-src');
            }
            n = i + 1;
            console.log('n=' + n);
          }
        }
      }
    </script>
</body>

</html>