几行代码，就写完懒加载啦？
Ⅰ、前言
- 「懒加载」是网页中非常 常见的；
- 为了减少系统的压力，对于一些电商系统出场频率非常高；
- 那么大家一般用什么方式去实现 「懒加载」 呢 ？
① 通过 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」事件，然后去判…...
PyTorch常用的损失函数(ChatGPT)
L1Loss nn.L1Loss 也称为平均绝对误差（Mean Absolute Error，MAE）。它计算预测值与真实值之间的差异（即误差），然后取绝对值并求和，最后除以样本数量得到平均误差。具体来说，对于一批…...
LeetCode——1237. 找出给定方程的正整数解
一、题目 来源：力扣（LeetCode） 链接：https://leetcode.cn/problems/find-positive-integer-solution-for-a-given-equation/description/ 翻译一下题目 意思是，这是一个二维单调递增的函数，函数一共有 9 …...
系统编程中的进程的概念No.3【进程状态】
引言： 北京时间：2023/2/17/8:17，目前听着超能陆战队主题曲《Immortals》，感觉又要螺旋式升天，并且为我今天上午没课感到happy，所以继我们很久以前的关于进程的博客，今天我们就再来学习一下有关…...
推荐 3 款 Golang 语义化版本库
文章目录1.什么是语义化版本 2.0.02.Golang 语义化版本库比较3.小结参考文献1.什么是语义化版本 2.0.0 语义化版本 2.0.0（Semantic Versioning 2.0.0）是一种用于标识软件版本的约定和规范。它包含三个数字组成的版本号，格式为“MAJOR.MINOR.…...
Windows平台使用gdb连接qemu虚拟机上的系统
先安装MinGW； 除了gcc、g，把gdb也选上；可能选第一个就可以了，不清楚把后面几个也选上； 安装完成看一下gcc, g，gdb，编译工具和调试器都有了； 把bin目录加到环境变量； 看一…...
【博客624】MAC地址表、ARP表、路由表(RIB表)、转发表(FIB表)
MAC地址表、ARP表、路由表(RIB表/FIB表) MAC地址表 MAC地址表是交换机等网络设备记录MAC地址和端口的映射关系，代表了交换机从哪个端口学习到了某个MAC地址，交换机把这个信息记录下来，后续交换机需要转发数据的时候就可以根据报文的目的MAC地…...
【蓝桥日记⑤】2014第五届省赛（软件类）JavaA组❆答案解析
【蓝桥日记⑤】2014第五届省赛（软件类）JavaA组☃答案解析 文章目录【蓝桥日记⑤】2014第五届省赛（软件类）JavaA组☃答案解析1、猜年龄2、李白打酒3、神奇算式4、写日志5、锦标赛6、六角填数7、绳圈8、兰顿蚂蚁9、斐波那契10、波动…...
Leetcode.1139 最大的以 1 为边界的正方形
题目链接 Leetcode.1139 最大的以 1 为边界的正方形 Rating ： 1744 题目描述 给你一个由若干 0 和 1 组成的二维网格 grid，请你找出边界全部由 1 组成的最大 正方形 子网格，并返回该子网格中的元素数量。 如果不存在，则返回 0。…...
Bing+ChatGPT 对传统搜索引擎的降维打击
早些时候申请了新版 Bing 的内测资格，终于收到了通过的邮件。 一天的体验之后，我的感受是：当新版 Bing 具备了 ChatGPT 的聊天能力之后，它的能力不论是对传统搜索引擎，还是 ChatGPT 自身，都将是降维打击。 …...
【JS】数组常用方法总结-功能、参数、返回值
数组常用方法总结-功能、参数、返回值 用简单的js示例 运行在线工具：链接: 菜鸟工具 菜鸟工具示意图： 
pytest 单元测试前后置处理
文章目录方法1 setup/teardown方法2 fixture 夹具方法3 conftest.py测试用例执行前后的一些处理动作，也叫夹具。以下介绍使用前后置操作的几种方法。方法1 setup/teardown setup，每个测试用例执行前要进行的处理。 teardown，每个测试用例执行…...
汽车安全硬件扩展 AUTOSAR SHE SecureHardwareExtensions
SHE（Secure Hardware Extension）在车联网中，被应用在车端ECU中负责安全存储与安全计算。是由HIS（由Audi、BMW、Porsche、Volkswagen组成）制定的标准，中文意思“安全硬件扩展”，是对任何给定微控…...
2023年美国大学生数学建模C题:预测Wordle结果建模详解+模型代码
目录 前言 一、题目理解 背景 解析 字段含义： 建模要求 二、建模思路 灰色预测： 编辑 二次指数平滑法： person相关性 只希望各位以后遇到建模比赛可以艾特认识一下我，我可以提供免费的思路和部分源码，以后…...
5、HAL库驱动W25Qxx
一、 SPI通信驱动W25Qxx 1、使用驱动文件快速配置工程代码驱动W25Qxx （此驱动文件只适合W25Qxx 16M及以下型号，因为访问地址位数不同） 注：本次使用SPI的方式进行访问W25Qxx Flash进行数据读写，关于W25Qxx芯片不会做…...
git rebase 洐合（变基）
洐合 把一个分支整合到另一个分支的办法有两种：merge（合并） 和 rebase（衍合） 为什么使用？ 使提交记录更简洁 三种情况 第一种： 合并多条commit记录 git rebase -i HEAD~合并数量 HEAD~3&a…...
Kubernetes 1.18学习笔记
文章目录一、Kubernetes 概述和架构1、kubernetes 基本介绍2、Kubernetes 功能3、Kubernetes 架构组件4、Kubernetes 核心概念5、Kubernetes 工作原理二、Kubernetes 集群搭建1、系统环境准备1.1 安装要求1.2 系统初始化2、客户端工具kubeadm搭建2.1 安装步骤2.2 安装组件2.3 集…...
AJAX技术
AJAX技术 浏览器是多进程的，简单的说就是，浏览器每打开一个标签页，就相当于创建了一个独立的浏览器进程。但是js是基于单线程的，而这个线程就是浏览器的js引擎，浏览器无论在什么时候都只且只有一个线程在运行JavaScri…...
华为OD机试 - 最大排列（JS）
最大排列 题目 给定一组整数，重排序后输出一个最大的整数 输入 数字组合 输出 最大的整数 示例一 输入 10 9输出 910解题思路 我们可以读入一个字符串，将字符串中的单词按照每个单词的字典序长度，字典序从大到小的顺序排序&#x…...
Prometheus Docker安装及监控自身
前提环境： Docker环境 涉及参考文档： 安装Prometheus开始 Prometheusnode_exporter Agent组件 一、部署Prometheus 1、启动容器将文件拷贝出来 docker run -d prom/prometheus2、容器将文件拷贝出来 docker cp 容器ID:/usr/share/prometheus/conso…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务： test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
HashMap中的put方法执行流程（流程图）
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...
MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）
macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生？别怕，教你轻松起飞！ 最近Homebrew更新至最新版，每次执行 brew 命令时都会自动从官方地址 https://formulae.…...
从面试角度回答Android中ContentProvider启动原理
Android中ContentProvider原理的面试角度解析，分为已启动和未启动两种场景： 一、ContentProvider已启动的情况 1. 核心流程 触发条件：当其他组件（如Activity、Service）通过ContentR…...