不一样的实现元素懒加载

一只大加号
243 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

懒加载

现在需要一个需求，用户通过页面滑动到底的时候显示加载中，去加载更多的数据，如果没有滑到底部，只需要加载当前的元素。当页面显示在加载中的时候，则加载剩余的元素，达到一个懒加载的目的，而不是将元素一次性全部渲染出来

image.png

当页面加载到此刻，我们去加载我们剩下的元素

实现

<style>
.box{
  width: 100px;
  height: 120px;
  background: lightblue;
  margin: 10px auto;
}
</style>
<div class="box_con">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="loading" style="width:100px;height:100px;margin: 10px auto;">加载中。。。</div>

我们先放置好我们目前的元素，以及加载中的元素

function loadItems(){
  console.log('loading')
  let bod = document.querySelector('.box_con');
  let ele  = document.createElement('div')
  ele.className = 'box';
  bod.append(ele)
}

我们要做的时候loading元素显示的时候，触发加载loadItems函数，函数的目的是去增加剩下的元素

主要api

其实我们的实现主要是靠一个api--Intersection Observer来实现即可

IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗 (viewport) 交叉状态的方法。祖先元素与视窗 (viewport) 被称为根 (root)。

该api可以监听元素和父级元素或者窗口的重叠状态，简单来说就是看元素有没有出现在父级或者窗口中。

实现

var loading = document.querySelector('.loading');
var flag = 0
var ob = new IntersectionObserver(function(entries){
  flag+=1
  if (entries[0].intersectionRatio >0&&flag!=0){//当前元素可见时
    loadItems(10);
  }
},{
  thresholds:0.5,//元素进入父级元素视野的大小
})
ob.observe(loading)

实现的过程比较简单，实例化api后监听loading元素，entries[0].intersectionRatio主要是判断是否达到条件

11.gif

这里为了更明显图片上我是加了定时器进去的，模仿调取数据需要用到的时间

setTimeout(() => {
    let bod = document.querySelector('.box_con');
    let ele  = document.createElement('div')
    ele.className = 'box';
    bod.append(ele)
  }, 1000);

上面的写法中，我用了flag来做一个判断，如果你用了我这个栗子去跑一下，你会发现页面加载的时候，不加flag，api会自动监听loading元素已经显示，所以就会默认调用一次，这里做了一个判断，默认的情况下只加载我们写好的div，而不调用我们的loading函数。

avatar
文章
阅读
粉丝