图片懒加载 + 节流

最新推荐文章于 2024-08-28 17:54:22 发布

Helx_

最新推荐文章于 2024-08-28 17:54:22 发布

阅读量74

点赞数

分类专栏： JavaScript/ES6笔记文章标签：懒加载 JavaScript 图片优化滚动事件防抖函数

本文链接：https://blog.csdn.net/qq_41449457/article/details/122241065

版权

JavaScript/ES6笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!--
 * @Description: 图片懒加载
 * @Version: 1.0
 * @Autor: Helx
 * @Date: 2021-12-30 15:14:10
 * @LastEditors: Helx
 * @LastEditTime: 2021-12-30 16:51:49
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>img懒加载</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background: rgb(240 248 255);
    }

    img {
      width: 500px;
      height: 300px;
      display: block;
      margin: 5px;
    }
  </style>
</head>

<body>
  <div class="content">
    <img src="" alt="" data-src="https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/875.jpg?2">
    <img src="" alt="" data-src="https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/875.jpg?2">
    <img src="" alt="" data-src="https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/875.jpg?2">
    <img src="" alt="" data-src="https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/875.jpg?2">
    <img src="" alt="" data-src="https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/875.jpg?2">
    <img src="" alt="" data-src="https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/875.jpg?2">
    <img src="" alt="" data-src="https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/875.jpg?2">
    <img src="" alt="" data-src="https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/875.jpg?2">
    <img src="" alt="" data-src="https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/875.jpg?2">
    <img src="" alt="" data-src="https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/875.jpg?2">
  </div>
</body>
<script>
  const imgs = document.querySelectorAll('img');
  //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
  function getTop(e) {
    return e.getBoundingClientRect().top;// getBoundingClientRect 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
  }

  function lazyLoad(imgs) {
    var H = document.documentElement.clientHeight;//获取可视区域高度
    var S = document.documentElement.scrollTop || document.body.scrollTop;// 滚动高度
    console.log('H', H);
    console.log('S', S);
    for (var i = 0; i < imgs.length; i++) {
      if (H + S > getTop(imgs[i])) {
        imgs[i].src = imgs[i].getAttribute('data-src');
      }
    }
  }
  const throttle = (fun, wait) => {
    let flag = false;
    return function (args) {
      if (flag) return;
      flag = true;
      setTimeout(() => {
        flag = false;
        console.log('args', args);// 所有img
        fun(args);
      }, wait);
    }
  }
  (
    function () {
      lazyLoad(imgs);
      const times = 1000;
      const _throttle = throttle(lazyLoad, times);
      window.addEventListener('scroll', function () {
        // lazyLoad(imgs);
        _throttle(imgs);
      })
    }
  )()
</script>

</html>

Helx_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载 + 节流

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l.
复制链接

扫一扫

专栏目录