当前位置： 首页 > news >正文

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

news 文章来源：https://blog.csdn.net/weixin_42232622/article/details/128998483 2024/11/25 12:42:23

Ⅰ、前言

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

在这里插入图片描述
① 通过 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去做懒加载了，交叉观察器轻松搞定

Ⅰ、前言 「懒加载」是网页中非常 常见的&#xff1b;为了减少系统的压力&#xff0c;对于一些电商系统出场频率非常高&#xff1b;那么大家一般用什么方式去实现 「懒加载」 呢 &#xff1f; ① 通过 scroll 的形式&#xff1a; 通过 滚动「scroll」事件&#xff0c;然后去判…...

编程日记 2023/5/23 6:14:29

工欲善其事，必先利其器，分享5款Windows效率软件

工欲善其事&#xff0c;必先利其器。作为全球最多人使用的桌面操作系统&#xff0c;Windows 的使用效率与我们的工作学习息息相关。今天&#xff0c;小编就为大家整理了5款提高效率的利器&#xff0c;让你的 Windows 更具生产力。 1.桌面自定义——Rainmeter Rainmeter是一款…...

编程日记 2023/5/20 0:14:45

机器学习笔记之生成模型综述(四)概率图模型 vs 神经网络

机器学习笔记之生成模型综述——概率图模型vs神经网络引言回顾&#xff1a;概率图模型与前馈神经网络贝叶斯网络 VS\text{VS}VS 神经网络表示层面观察两者区别推断、学习层面观察两者区别引言 本节将介绍概率图模型与神经网络之间的关联关系和各自特点。 回顾&#xff1a;概率…...

编程日记 2023/5/14 10:30:45

微信小程序 组件与页面交互 无反应的问题

使用组件 声明组件 1.在目录中右键&#xff0c;新建components 2.在页面的json&#xff0c;属性中加入"component": true, 编写组件 父 声明&#xff1a; "usingComponents": {"address": "../../components/address/address"},…...

编程日记 2023/5/23 12:44:48

maven相关概念以及no dependency information available错误修改

一&#xff0c;相关概念 1&#xff0c;Maven坐标 Maven定义了这样一组规则&#xff1a;世界上任何一个构件都可以使用Maven坐标唯一标识&#xff0c;Maven坐标元素包括groupId、artifactId、version、packaging、classifier&#xff0c;现在只要我们提供正确的元素坐标&#x…...

编程日记 2023/5/25 12:12:20

QML- 属性绑定

QML- 属性绑定一、概述二、 QML绑定使用三、从JavaScript创建属性绑定1. 调试绑定的覆盖2. 属性绑定使用 this一、概述 QML对象的属性可以被赋一个静态值&#xff0c;该值保持不变&#xff0c;直到显式地赋一个新值。但是&#xff0c;为了充分利用QML及其对动态对象行为的内置…...

编程日记 2023/5/3 4:08:23

MFC CObject的使用

目录1 从 CObject 派生类1.1 使用基本 CObject 功能1.2 添加运行时类信息1.3 添加动态创建支持1.4 添加序列化支持2 访问运行时类信息3 动态对象创建1 从 CObject 派生类 在 CObject 的讨论中&#xff0c;经常使用术语“接口文件”和“实现文件”。 接口文件&#xff08;通常称…...

编程日记 2023/5/10 0:08:54

CNI 网络流量分析（六）Calico 介绍与原理（一）

文章目录CNI 网络流量分析&#xff08;六&#xff09;Calico 介绍与原理&#xff08;一&#xff09;介绍安装Calico-node初始化Calico-node 服务Felixconfdallocate-tunnel-addrsmonitor-addressesmonitor-tokenstatus-reporterbirdcalico-kube-controllersCNI 网络流量分析&am…...

编程日记 2023/5/27 2:42:36

机器视觉_HALCON_示例实践_1.检测圆形

文章目录一、引言二、检测圆形三、总结一、引言 前面的文&#xff08;用户指南/快速向导&#xff09;差不多已经把HALCON的基本内容讲完了&#xff0c;并且在学习过程中还跑过一个简单示例——在单一背景下定位回形针。示例跑过&#xff0c;顿时觉得自己行了&#xff0c;但如果…...

编程日记 2023/5/18 22:10:51

使用yolov5训练数据集笔记

准备工作 1. 安装labelimg labelimg:主要用于目标检测的目标框绘制&#xff0c;得到关于我们训练的边框位置、类别等数据 pip install labelimg2. 下载yolov5源码 我使用的是v7.0版本&#xff0c;直接下载即可&#xff0c;下载后解压出来 2.1 安装yolov5运行依赖包 进入…...

编程日记 2023/5/27 21:29:48

常用类详解（三）StringBuilder

(1)一个可爱的字符序列。此类提供一个与StringBuffer兼容的API&#xff0c;但不保证同步(StringBuilder不是线程安全的)&#xff0c;该类被设计用作StringBuffer的一个简易替换&#xff0c;用在字符串缓冲区被单个线程使用的时候。如果可能&#xff0c;建议优先采用该类&#x…...

编程日记 2023/5/25 12:18:39

OpenCV 文字绘制----cv::putText详解

opencv中除了提供绘制各种图形的函数外&#xff0c;还提供了一个特殊的绘制函数——在图像上绘制文字。这个函数cv::putText()。 具体形式如下&#xff1a; void cv::putText( cv::Mat& img, // 待绘制的图像 const string& text, // 待绘制的文字 cv::Point origin…...

编程日记 2023/5/5 13:07:24

同IP多个端口域名同时进行目录爆破

背景 目录爆破是信息收集不可缺的一部分 在渗透过程中，扫描地址时发现同IP下存在多个端口，且每个端口均属于域名，仅仅端口号不同 需求 同一个IP下，同时收集多个不同端口的域名目录爆破进行信息收集，且简单便捷（一行代码） 用到的工具 gobuster 下载地址：https://…...

编程日记 2023/5/5 13:08:40

react+antd+Table里切换Switch改变状态onChange 传参

场景&#xff1a;table列表里面&#xff0c;操作用Switch切换状态。对应列改变操作在colums里面// 表格行const colums: ColumnsType<potentialType> [{title: useLocale(创建时间),dataIndex: creation_date,key: creation_date,align: center,render: (v: string, rec…...

编程日记 2023/6/1 3:45:41

《底层逻辑：看清这个世界的底牌》读后感

书名《底层逻辑&#xff1a;看清这个世界的底牌》作者刘润简介如果只教给你各行各业的“干货”&#xff08;方法论&#xff09;&#xff0c;那只是“授人以鱼”&#xff0c;一旦环境出现任何变化&#xff0c;“干货”就不再适用。但如果教给你的是底层逻辑&#xff0c;那就是“…...

编程日记 2023/5/29 19:26:21

【2023】Prometheus-Blackbox_exporter使用

目录1.下载及安装blackbox_exporter2.修改配置文件设置监控内容2.1.使用http方式作为探测3.与prometheus集成4.导入blackbox仪表盘进行观测1.下载及安装blackbox_exporter 下载安装包 wget https://github.com/prometheus/blackbox_exporter/releases/download/v0.23.0/black…...

编程日记 2023/5/25 12:20:16

嵌入式Linux学习经典书籍-学完你就是高手

很多刚入门的朋友一直都有人问我要学习资料&#xff0c;嵌入式实在太杂&#xff0c;网上很多人写的太不负责了&#xff0c;本书单综合了本人以及一些朋友多年的经验整理而成。 本人见识和阅读量有限&#xff0c;本书单可能有不对的地方&#xff0c;欢迎朋友指正&#xff0c;交…...

编程日记 2023/5/10 2:44:26

网络基础-基础网络命令

文章目录路由命令查询添加路由1.添加访问某台主机的静态路由2.添加访问某个网络的静态路由3.添加默认网关&#xff1a;删除设计关键字路由2参考路由 命令查询 通过 route --help 或man route 查询 添加路由 1.添加访问某台主机的静态路由 route add -host [目标主机IP地址…...

编程日记 2023/5/22 16:55:28

域对象共享数据

处理请求的过程&#xff1a;获取请求参数&#xff0c;调用service处理业务逻辑&#xff0c;往域对象中共享数据&#xff0c;最后实现渲染页面跳转。请求域中共享数据ModelAndView向request域对象共享数据ModelAndView&#xff1a;往域对象共享数据&#xff0c;并实现页面跳转和…...

编程日记 2023/4/22 18:40:01

【基于jeeSite框架】SpringBoot+poi+Layui自定义列表导出

文章目录功能效果思路代码前台后台easyPoi,easyExcel&#xff0c;poi三者的区别poipoi依赖导出ExcelHSSF方式导出XSSF方式导出SXSSF方式导出导入excelHSSF方式导入XSSF方式导入SXSSF方式导入easyPoi依赖包采用注解导出导入easyExcel依赖采用注解导出导入API文档easyPoi操作文档…...

编程日记 2023/5/6 8:24:11

使用 RGB 值设置颜色

使用 RGB 值设置颜色 另一种可以在 CSS 中表示颜色的方法是使用 RGB 值。 RGB 即红色、绿色、蓝色&#xff08;英语&#xff1a;Red, Green, Blue&#xff09;。 ● 红色&#xff08;R&#xff09;0 到 255 间的整数&#xff0c;代表颜色中的红色成分。。 ● 绿色&#xff08;G…...

编程日记 2023/5/14 23:22:02

【python学习笔记】：5个高效编程技巧

01 交换变量​​​​​​​ >>>a3 >>>b6 这个情况如果要交换变量在c中&#xff0c;肯定需要一个空变量。但是python不需要&#xff0c;只需一行&#xff0c;大家看清楚了​​​​​​​ >>>a,bb,a >>>print(a)>>>6 >>&g…...

编程日记 2023/5/26 0:51:35

IP多播技术详解

文章目录前言IP多播技术的相关基本概念IP多播地址和多播组在局域网上进行硬件多播IP多播地址和多播MAC地址映射关系在因特网上进行IP多播网际组管理协议IGMP多播路由选择协议前言 随着计算机网络的发展和个人计算机的普及&#xff0c;人们能够方便的在网络上畅游&#xff0c;进…...

编程日记 2023/5/7 20:53:59

华为OD机试真题Python实现【数组排序】真题+解题思路+代码（20222023）

🔥系列专栏 华为OD机试（Python）真题目录汇总华为OD机试（JAVA）真题目录汇总华为OD机试（C++）真题目录汇总华为OD机试（JavaScript）真题目录汇总文章目录 🔥系列专栏题目输入输出示例一输入输出解题思路核心知识点Python 代码实现代码运行结果版权说明</...

编程日记 2023/5/26 13:11:38

丹麦市政当局通过 NetIQ 身份和访问管理解决方案，提高安全合规性

丹麦市政当局通过 NetIQ 身份和访问管理解决方案&#xff0c;提高安全合规性 概览 公司&#xff1a;普华永道 行业&#xff1a;咨询 地点&#xff1a;丹麦 挑战 创建一个通用框架&#xff0c;以便丹麦市政当局可以无需内部专业知识的前提下利用高级身份和访问管理 使用的…...

编程日记 2023/5/7 21:11:08

内网渗透学习官方文档

内网渗透0x00 kerberos协议0x01 ntlm协议0x02 管道0x03 smb协议0x04 windows访问控制0x05 令牌窃取0x06 SPN扫描&kerberoast0x07 黄金票据0x08 白银票据0x09 MS140680x10 NTDS.DIT && sam0x11 NTLM Relay0x12 MS08-0680x13 CVE-2019-13840x00 kerberos协议 kerber…...

编程日记 2023/5/26 7:40:46

如何编写接口测试用例？

接口测试用例如何编写&#xff1f;下面简单给大家讲解一下。 接口测试用例是目前软件开发中不可或缺的一个重要部分&#xff0c;因此编写接口测试用例同样重要。 接口测试用例的作用非常明显&#xff0c;它能够帮助我们了解产品正在考验、调整它如何表现在特定情境之下、产品是…...

编程日记 2023/5/2 12:30:19

代码随想录算法训练营第44天 || 完全背包 || 518. 零钱兑换 II || 377. 组合总和 Ⅳ

代码随想录算法训练营第44天 || 完全背包 || 518. 零钱兑换 II || 377. 组合总和 Ⅳ 完全背包 完全背包与01背包的区别在于每种物品都有无限件&#xff0c;可以多次放入背包。 我们回顾一下01背包的遍历顺序&#xff0c;其中内层遍历背包的过程要后序遍历&#xff0c;为什么…...

编程日记 2023/4/23 22:37:00

【Bug】SQL无法绑定由多个部分组成的标识符

文章目录问题原因解决拓展问题 执行sql报&#xff1a;无法绑定由多个部分组成的标识符 原因 取了别名却没用别名&#xff0c;如下面这些情况 select * from biz_production_order_work_detail temp where biz_production_order_work_detail.create_time>2023-02-13selec…...

编程日记 2023/5/24 13:41:17

Games102 学习笔记

Games 102 P2 数据拟合 拟合数据的好坏 分段线性插值函数yf1(x)yf_1(x)yf1​(x)&#xff0c;数据误差为0&#xff0c;只有C0C_0C0​连续。光滑插值函数yf2(x)yf_2(x)yf2​(x)&#xff0c;数据误差为0&#xff0c;可能被Noice带歪&#xff0c;导致函数性质不好&#xff0c;预…...

编程日记 2023/5/31 9:22:33

新浪云 wordpress/seo作弊

题目描述&#xff1a; 在一个字符串(1<字符串长度<10000&#xff0c;全部由大写字母组成)中找到第一个只出现一次的字符。 如输入 abaccdeff&#xff0c;则输出 b。 输入&#xff1a; 输入有多组数据　　每一组输入一个字符串。 输出&#xff1a; 输出第一个只出现一次的…...

编程日记 2024/11/25 10:20:09

建设部造价工程师考试网站/360搜索引擎首页

http://870604904.iteye.com/blog/2258604 第一次写博客&#xff0c;也就是记录一些自己对于JAVA的一些理解&#xff0c;不足之处&#xff0c;请大家指出&#xff0c;一起探讨。 这篇博文我打算说一下JAVA中锁&#xff0c;也就是Lock&#xff08;&#xff09;的部分源码&#x…...

编程日记 2024/11/25 8:48:05

求邯郸网站制作/网店培训骗局

好的参考&#xff1a;https://linux.cn/article-4302-1.html http://darkdust.net/files/GDB%20Cheat%20Sheet.pdf 1&#xff09;加 -g 了吗&#xff1f; 首先请确保在编译时加上了-g 如果出现找不到*.cpp文件等错误&#xff0c;一般是没有正确添加 -g 选项。 2&#xff…...

编程日记 2024/11/25 7:23:44

如何查看网站是哪家公司做的/培训学校怎么招生

我已经到了秃顶几步之遥…我正在尝试运行一项服务&#xff0c;该服务将检查我工作中的服务器是否正在运行。应该每5分钟执行一次。我经历过TimerTask&#xff0c;ScheduledExecutorService&#xff0c;最后是Handler。他们都工作了好几个小时&#xff0c;除了一些不准确的地方外…...

编程日记 2024/11/25 6:22:15

顺的品牌网站建设/品牌营销推广方案怎么做

# 周围可能有东西能帮到你。 # 首先&#xff0c;移动到橱柜。 hero.moveUp() hero.moveRight(2) hero.moveDown(2) # 然后&#xff0c;使用while-true循环攻击"Cupboard"&#xff08;橱柜&#xff09;。 while True: hero.attack("Cupboard")...

编程日记 2024/11/25 2:54:16

海南网站建设哪里有/广点通和腾讯朋友圈广告区别

--loop循环用法 (输出1到10) declare v_num number(2) : 0; begin loopv_num : v_num 1;exit when v_num > 10;--上面退出循环也可以用下面3行/* if(v_num > 9) thenexit;end if;*/dbms_output.put_line(v_num); end loop; end;--while loop循环用法 (输出1到10) decl…...

编程日记 2024/11/25 1:08:56