您好,欢迎来到二三四教育网。
搜索
您的当前位置:首页原生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>

Copyright © 2019- how234.cn 版权所有 赣ICP备2023008801号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务