基本信息
源码名称：图片懒加载 示例源码
源码大小：0.88M
文件格式：.zip
开发语言：js
更新时间：2021-01-12
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍



<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>图片懒加载</title>
  <style>
    img {
      width: 355px;
      height: 200px;
      display: block;
      margin-bottom: 50px;
      height: 200px;
    }
  </style>
</head>

<body>
  <!-- https://www.cnblogs.com/qing-5/p/11343125.html -->
  <img src="./loading.gif" data-src="./1.jpeg">
  <img src="./loading.gif" data-src="./2.jpeg">
  <img src="./loading.gif" data-src="./3.jpeg">
  <img src="./loading.gif" data-src="./4.jpg">
  <img src="./loading.gif" data-src="./5.jpg">
  <img src="./loading.gif" data-src="./6.jpeg">
  <img src="./loading.gif" data-src="./7.jpg">
  <img src="./loading.gif" data-src="./1.jpeg">
  <img src="./loading.gif" data-src="./2.jpeg">
  <img src="./loading.gif" data-src="./3.jpeg">
  <img src="./loading.gif" data-src="./4.jpg">
  <img src="./loading.gif" data-src="./5.jpg">
  <script>
    function throttle(fn, delay, atleast) {//函数绑定在 scroll 事件上，当页面滚动时，避免函数被高频触发，
      var timeout = null,//进行去抖处理
        startTime = new Date();
      return function () {
        var curTime = new Date();
        clearTimeout(timeout);
        if (curTime - startTime >= atleast) {
          fn();
          startTime = curTime;
        } else {
          timeout = setTimeout(fn, delay);
        }
      }
    }
    function lazyload() {
      var images = document.getElementsByTagName('img');
      var len = images.length;
      var n = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历        
      return function () {
        // 定义浏览器可见区域高度
        var seeHeight = document.documentElement.clientHeight;
        // 滚动条的高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = n; i < len; i ) {
          // obj.offsetTop 指 obj 距离上方或上层控件的位置
          // obj.offsetLeft 指 obj 距离左方或上层控件的位置
          // obj.offsetWidth 指 obj 控件自身的宽度
          // obj.offsetHeight 指 obj 控件自身的高度
          if (images[i].offsetTop < seeHeight scrollTop) {
            if (images[i].getAttribute('src') === './loading.gif') {
              images[i].src = images[i].getAttribute('data-src');
            }
            n = n 1;
            console.log("------------------------->>>", n)
          }
        }
      }
    }
    var loadImages = lazyload();
    loadImages();          //初始化首页的页面图片
    window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
//函数节流（throttle）与函数去抖（debounce）处理,
//500ms 的延迟，和 1000ms 的间隔，当超过 1000ms 未触发该函数，则立即执行该函数，不然则延迟 500ms 执行该函数
  </script>
</body>

</html>