别在用scroll去做懒加载了，交叉观察器轻松搞定
- 手机
- 2025-08-20 04:42:01
Ⅰ、前言 「懒加载」是网页中非常 常见的；为了减少系统的压力，对于一些电商系统出场频率非常高；那么大家一般用什么方式去实现 「懒加载」 呢 ？
① 通过 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>别在用scroll去做懒加载了，交叉观察器轻松搞定由讯客互联手机栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“别在用scroll去做懒加载了，交叉观察器轻松搞定”
