原生js实现图片列表懒加载和截流

最新推荐文章于 2023-12-12 09:13:56 发布

初辰ge

最新推荐文章于 2023-12-12 09:13:56 发布

阅读量500

点赞数 2

分类专栏： JavaScript 文章标签： js 列表

本文链接：https://blog.csdn.net/chuenst/article/details/118174991

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

为什么图片列表要用懒加载？

1 增强用户体验
2 优化代码
3 减少http的请求
4 减少服务器端压力
5 服务器的按需加载
6 提升页面第一次加载的速度

代码

// 懒加载实现
function lazyload(imgs) {
  var h = window.innerHeight;
  var s = document.documentElement.scrollTop
  for (var i = 0; i < imgs.length; i++) {
    if ((h + s) > getTop(imgs[i])) {
      if (imgs[i].src != imgs[i].getAttribute('data-src')) {
         imgs[i].src = imgs[i].getAttribute('data-src')
      }
    }
  }
}

为什么要用截流？

1 增强用户体验
2 优化代码
3 减少事件请求频率

代码

//截流
function throttle(fn, interval = 500) {
  let timer = null
  return function () {
    if (timer) return
    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    }, interval)
  }
}

配合截流和懒加载以实现最佳的用户体验和网站性能

效果图
在这里插入图片描述
全部代码

<!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>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style: none;
    }

    img {
      width: 100%;
      height: 300px;
    }
  </style>
</head>

<body>
  <ul>
    <li>
      <img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
        data-src="https://cdn.pixabay.com/photo/2021/06/16/21/46/parrot-6342271__340.jpg" alt="">
    </li>
    <li>
      <img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
        data-src="https://cdn.pixabay.com/photo/2021/06/20/08/28/wheat-grass-6350274__340.jpg" alt="">
    </li>
    <li>
      <img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
        data-src="https://cdn.pixabay.com/photo/2019/08/08/11/42/butterfly-4392802__340.jpg" alt="">
    </li>
    <li>
      <img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
        data-src="https://cdn.pixabay.com/photo/2018/07/04/11/58/xiamen-3515964__340.jpg" alt="">
    </li>
    <li>
      <img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
        data-src="https://cdn.pixabay.com/photo/2019/08/17/04/18/morning-4411421__340.jpg" alt="">
    </li>
    <li>
      <img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
        data-src="https://cdn.pixabay.com/photo/2021/05/28/11/39/girl-6290663__340.jpg" alt="">
    </li>
    <li>
      <img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
        data-src="https://cdn.pixabay.com/photo/2021/05/27/20/53/field-6289253__340.jpg" alt="">
    </li>
    <li>
      <img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
        data-src="https://cdn.pixabay.com/photo/2021/02/07/15/47/reed-5991717__340.jpg" alt="">
    </li>
    <li>
      <img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
        data-src="https://cdn.pixabay.com/photo/2021/01/28/18/21/beach-5958718__340.jpg" alt="">
    </li>
    <li>
      <img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
        data-src="https://cdn.pixabay.com/photo/2020/10/12/22/15/glass-5650335__340.jpg" alt="">
    </li>
    <li>
      <img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
        data-src="https://cdn.pixabay.com/photo/2021/04/22/15/46/landscape-6199355__340.jpg" alt="">
    </li>
    <li>
      <img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
        data-src="https://cdn.pixabay.com/photo/2019/11/19/22/23/cat-4638664__340.jpg" alt="">
    </li>
  </ul>
  <script>
    window.addEventListener('DOMContentLoaded', function () {
      // 获取图片列表，即img标签列表
      var imgs = document.querySelectorAll('img');
      // 初始化页面图片
      lazyload(imgs);
      // 滚屏事件
      window.onscroll = throttle(() => {
        lazyload(imgs)
      }, 600)
      // 获取到浏览器顶部的距离
      function getTop(e) {
        return e.offsetTop;
      }
      // 懒加载实现
      function lazyload(imgs) {
        var h = window.innerHeight;
        var s = document.documentElement.scrollTop
        for (var i = 0; i < imgs.length; i++) {
          if ((h + s) > getTop(imgs[i])) {
            if (imgs[i].src != imgs[i].getAttribute('data-src')) {
              imgs[i].src = imgs[i].getAttribute('data-src')
            }

          }
        }
      }
      //截流
      function throttle(fn, interval = 500) {
        let timer = null
        return function () {
          if (timer) return
          timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
          }, interval)
        }
      }
    })
  </script>
</body>

</html>

初辰ge

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js实现图片列表懒加载和截流

为什么图片列表要用懒加载？1 增强用户体验2 优化代码3 减少http的请求4 减少服务器端压力5 服务器的按需加载6 提升页面第一次加载的速度代码// 懒加载实现function lazyload(imgs) { var h = window.innerHeight; var s = document.documentElement.scrollTop for (var i = 0; i < imgs.length; i++) { if ((h + s) &
复制链接

扫一扫