别在用scroll去做懒加载了，交叉观察器轻松搞定

news2025/4/27 12:07:29

Ⅰ、前言

「懒加载」是网页中非常常见的；
为了减少系统的压力，对于一些电商系统出场频率非常高；
那么大家一般用什么方式去实现「懒加载」呢？

在这里插入图片描述
① 通过 scroll 的形式：

通过滚动「scroll」事件，然后去判断距离，当距离到达一定范围，判断是否要加载资源；

② 通过 IntersectionObserver 的形式：

通过元素与设备视窗或者其他指定元素发生交集的时候 => 「最底部的元素滚动到视口时」，判断是否要加载资源；

优势：

「IntersectionObserver」不像「scroll」事件触发那么频繁，对系统压力更小；
不用计算距离，使用起来更加简单；

Ⅱ、概念与用法

IntersectionObserver 构造函数需要传入一个回调函数；
当「首次加载」或「元素与视窗发生交集 (或指定元素) 」会执行这个回调函数；
通过 observer 方法给定一个元素观察；

  const observer = new IntersectionObserver(callback);
  observer.observe(dom);

Ⅲ、用交叉观察器实现懒加载

首先我们创建 content 用存放内容，每次加载再向其中加入更多内容；
用交叉观察器（IntersectionObserver）监听 <footer> 标签，首次触发一下，当 <footer> 滚动到页面上时
然后写一个添加的方法（例：addItem），每次添加10条内容;
过程如下 👇

<body>
    <div class="content"></div>
    <footer> 加载中。。。 </footer>
</body>
<script>
    const footer = document.getElementsByTagName('footer')[0]
    const observer = new IntersectionObserver((val) => {
        addItem();
    });
    observer.observe(footer);

    const content = document.getElementsByClassName('content')[0]
    let num = 0;
    function addItem() {
        for (let i = num; i < num+10; i++) {
            let node = document.createElement("div");
            node.innerText = `第${i+1}列`
            node.className = 'item'
            box.appendChild(content)
        }
        num = num + 10;
    }
</script>

查看效果 👇

在这里插入图片描述

再添加一点样式，完整例子 👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .item {
        height: 100px;
        box-sizing: border-box;
        border-bottom: 1px solid red;
        background: orange;
        width: 300px;
        text-align: center;
        line-height: 100px;
        margin: 0 auto;
    }
    body {
        padding: 0;
        margin: 0;
    }
    footer {
        width: 300px;
        margin: 0 auto;
        height: 50px;
        margin: 0 auto;
        background: aqua;
        text-align: center;
        line-height: 50px;
    }
</style>

<body>
    <div class="box"></div>
    <footer> 加载中。。。 </footer>
</body>
<script>
    const footer = document.getElementsByTagName('footer')[0]
    const observer = new IntersectionObserver((val) => {
        setTimeout(addItem, 300);
    });
    observer.observe(footer);

    const box = document.getElementsByClassName('box')[0]
    let num = 0;
    function addItem() {
        for (let i = num; i < num + 10; i++) {
            let node = document.createElement("div");
            node.innerText = `第${i + 1}列`
            node.className = 'item'
            box.appendChild(node)
        }
        num = num + 10;
    }
</script>
</html>