原生js实现图片懒加载并实现页面触底加载更多

最新推荐文章于 2023-01-08 20:40:18 发布

路西

最新推荐文章于 2023-01-08 20:40:18 发布

阅读量327

点赞数 1

分类专栏： javascript 文章标签： js css javascript html

本文链接：https://blog.csdn.net/weixin_43720534/article/details/114682007

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

思路：设置自定义属性绑定到 img 上 src 上绑定load图当图片处于视口区域时将自定义属性的 url 替换图片的 url 即可

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    img {
      display: block;
      margin-top: 20px;
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>

  <div class="container" id="container">
    <div class="imgbox" id="imageBox">
      <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2073083920,3302495016&fm=26&gp=0.jpg"
        data-src="https://pic2.zhimg.com/50/v2-2038cd0997d58ff893d433761b90c102_hd.webp" alt="">
    </div>
  </div>

  <script>
    let num = 10;

    function LoadData() {  // 模拟获取数据
      new Array(num).fill(null).forEach(v => {
        container.innerHTML += `<div class="imgbox" id="imageBox">
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2073083920,3302495016&fm=26&gp=0.jpg"
          data-src="https://pic2.zhimg.com/50/v2-2038cd0997d58ff893d433761b90c102_hd.webp" alt="">
      </div>`
      })
    }


    function imageLazy() {
      // 获取到窗口的高度和窗口被上滑卷曲的长度
      let $B = window.outerHeight + window.pageYOffset
      Array.from(imageBox).forEach(node => {
        // 获取到目标节点的距离顶点的距离 和元素的高度
        let $A = node.offsetTop + node.clientHeight
        // 获取图片节点
        let imgDom = node.getElementsByTagName('img')[0]

        // 获取到图片节点是否加载的信息
        let imgDomLoad = imgDom.getAttribute('load')

        // 目标节点的距离顶点的距离加上元素的高度 大于  窗口的高度和窗口被上滑卷曲的长度 并且图片未加载
        if ($A <= $B && !imgDomLoad) {
          // 获取到图片的自定义属性的url 添加到图片src中
          imgDom.src = imgDom.getAttribute('data-src')
          // 设置添加属性 标识已经加载过
          imgDom.setAttribute('load', 'true')
        }
      })

    }

    window.onload = function () {  //页面加载完成执行函数
      LoadData()
      imageLazy()
    }
    window.addEventListener('scroll', function () {  // 页面滚动是监听
      let containerH = container.clientHeight
      let $B = window.outerHeight + window.pageYOffset
      if ($B >= containerH) {  // 页面触底加载数据
        LoadData()
      }
      imageLazy()
    })
  </script>
</body>

</html>

以上就是图片懒加载的代码，可直接复制学习

路西

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现图片懒加载并实现页面触底加载更多

思路：设置自定义属性绑定到 img 上 src 上绑定load图当图片处于视口区域时将自定义属性的 url 替换图片的 url 即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.
复制链接

扫一扫