更优的滚动加载方案，图片懒加载

好喝的西北风

已于 2023-03-15 10:49:19 修改

阅读量322

点赞数 1

文章标签：前端 javascript Powered by 金山文档

于 2023-03-14 22:39:15 首次发布

本文链接：https://blog.csdn.net/weixin_43340372/article/details/129541662

版权

效果

解决问题：实现图片的懒加载

传统做法是监听滚动条滚动到底部时触发加载，但是这种方法并不是最好的，因为滚动条滚动过程触发事件过于频繁，哪怕没有滚动到底部也是处于监听状态；实际只需要滚动到底部时出发加载，滚动过程中不需要监听

3. 新的思路

H5的API提供了一个构造函数IntersectionObserver，可以监控某一个元素，看这个元素随着滚动条的滚动有没有出现在另一个元素的可视范围之内

4. 上代码

<!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>监听元素重叠</title>
</head>

<body>
</body>

</html>

<script>
  // 模拟接口获取图片数据
  function api(count) {
    return new Promise((resolve, reject) => {
      var images = []
      setTimeout(() => {
        for (let index = 1; index < count; index++) {
          images.push(`../assets/img/${index}.jpg`)
        }
        resolve({
          code: 200,
          msg: "加载成功",
          images
        })
      }, 2000);
    })
  }
  // 图片渲染工厂
  class ImgFactory {
    constructor(container, node) {
      this.container = document.querySelector(container);
      this.node = node;
    }
    render(images) {
      images.forEach(url => {
        var img = document.createElement('img')
        img.src = url
        img.classList = ['img']
        this.container.insertBefore(img, this.node)
      });
    }
  }
  // 加载提示工厂 
  class LoadFactory {
    constructor(container) {
      // 创建容器
      this.container = document.querySelector(container);
      this._div = document.createElement("div");
      this._div.className = "loading";
      this.container.appendChild(this._div)
    }
    // 获取获取当前节点
    getLoaingEle() {
      return this._div
    }
    // 删除loading
    remove() {
      this.container.removeChild(this.div)
    }
    // 创建loading
    create() {
      var img = document.createElement('img');
      img.src = "../assets/img/loading.gif"
      this._div.appendChild(img)
    }
  }
  var load = new LoadFactory("body");
  // 获取loading节点
  var loading = load.getLoaingEle();
  // 显示加载动画
  load.create()
  // 创建图像工厂实例用于渲染图像
  var imgFactory = new ImgFactory('body', loading)
  // 加载更多接口  
  function more(number) {
    api(number).then(res => {
      // 加载成功渲染图片
      if (res.code === 200) {
        imgFactory.render(res.images)
      }
    })
  }
  // 建立观察者
  var ob = new IntersectionObserver(function (entries) {
    var entry = entries[0]
    if (entry.isIntersecting) {
      more(10)
    }
  }, {
    thresholds: 0.1
  });
  // 观察节点
  ob.observe(loading);
</script>
<style>
  html,
  body {
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background-color: #eeedee;
  }

  .img {
    height: 220px;
    width: 365px;
    margin: 5px;
  }

  .loading {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .loading img {
    width: 100px;
    height: 100px;
  }
</style>

代码结构

好喝的西北风

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
更优的滚动加载方案，图片懒加载

传统做法是监听滚动条滚动到底部时触发加载，但是这种方法并不是最好的，因为滚动条滚动过程触发事件过于频繁，哪怕没有滚动到底部也是处于监听状态；实际只需要滚动到底部时出发加载，滚动过程中不需要监听。，可以监控某一个元素，看这个元素随着滚动条的滚动有没有出现在另一个元素的可视范围之内。H5的API提供了一个构造函数。
复制链接

扫一扫