在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例JavaScript基础 → 图片懒加载 示例源码

图片懒加载 示例源码

JavaScript基础

下载此实例
  • 开发语言:js
  • 实例大小:0.88M
  • 下载次数:4
  • 浏览次数:110
  • 发布时间:2021-01-12
  • 实例类别:JavaScript基础
  • 发 布 人:xieyp
  • 文件格式:.zip
  • 所需积分:2
 相关标签: 加载 图片

实例介绍

【实例简介】

【实例截图】

from clipboard



from clipboard

【核心代码】

<!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>

标签: 加载 图片

实例下载地址

图片懒加载 示例源码

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
;
报警