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

几行代码，就写完懒加载啦？

news 文章来源：https://blog.csdn.net/weixin_42232622/article/details/128998483 2024/11/5 11:39:09

Ⅰ、前言

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

在这里插入图片描述
① 通过 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>

在这里插入图片描述

相关文章：

几行代码，就写完懒加载啦？

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

编程日记 2023/2/18 19:29:53

PyTorch常用的损失函数(ChatGPT)

L1Loss nn.L1Loss 也称为平均绝对误差&#xff08;Mean Absolute Error&#xff0c;MAE&#xff09;。它计算预测值与真实值之间的差异&#xff08;即误差&#xff09;&#xff0c;然后取绝对值并求和&#xff0c;最后除以样本数量得到平均误差。具体来说&#xff0c;对于一批…...

编程日记 2023/2/18 19:28:41

LeetCode——1237. 找出给定方程的正整数解

一、题目 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/find-positive-integer-solution-for-a-given-equation/description/ 翻译一下题目 意思是&#xff0c;这是一个二维单调递增的函数&#xff0c;函数一共有 9 …...

编程日记 2023/2/18 19:27:32

系统编程中的进程的概念No.3【进程状态】

引言&#xff1a; 北京时间&#xff1a;2023/2/17/8:17&#xff0c;目前听着超能陆战队主题曲《Immortals》&#xff0c;感觉又要螺旋式升天&#xff0c;并且为我今天上午没课感到happy&#xff0c;所以继我们很久以前的关于进程的博客&#xff0c;今天我们就再来学习一下有关…...

编程日记 2023/2/18 19:26:18

推荐 3 款 Golang 语义化版本库

文章目录1.什么是语义化版本 2.0.02.Golang 语义化版本库比较3.小结参考文献1.什么是语义化版本 2.0.0 语义化版本 2.0.0&#xff08;Semantic Versioning 2.0.0&#xff09;是一种用于标识软件版本的约定和规范。它包含三个数字组成的版本号&#xff0c;格式为“MAJOR.MINOR.…...

编程日记 2023/2/18 19:25:06

Windows平台使用gdb连接qemu虚拟机上的系统

先安装MinGW&#xff1b; 除了gcc、g&#xff0c;把gdb也选上&#xff1b;可能选第一个就可以了&#xff0c;不清楚把后面几个也选上&#xff1b; 安装完成看一下gcc, g&#xff0c;gdb&#xff0c;编译工具和调试器都有了&#xff1b; 把bin目录加到环境变量&#xff1b; 看一…...

编程日记 2023/2/18 19:23:51

【博客624】MAC地址表、ARP表、路由表(RIB表)、转发表(FIB表)

MAC地址表、ARP表、路由表(RIB表/FIB表) MAC地址表 MAC地址表是交换机等网络设备记录MAC地址和端口的映射关系&#xff0c;代表了交换机从哪个端口学习到了某个MAC地址&#xff0c;交换机把这个信息记录下来&#xff0c;后续交换机需要转发数据的时候就可以根据报文的目的MAC地…...

编程日记 2023/2/18 19:21:16

【蓝桥日记⑤】2014第五届省赛（软件类）JavaA组❆答案解析

【蓝桥日记⑤】2014第五届省赛&#xff08;软件类&#xff09;JavaA组☃答案解析 文章目录【蓝桥日记⑤】2014第五届省赛&#xff08;软件类&#xff09;JavaA组☃答案解析1、猜年龄2、李白打酒3、神奇算式4、写日志5、锦标赛6、六角填数7、绳圈8、兰顿蚂蚁9、斐波那契10、波动…...

编程日记 2023/2/18 19:20:02

Leetcode.1139 最大的以 1 为边界的正方形

题目链接 Leetcode.1139 最大的以 1 为边界的正方形 Rating &#xff1a; 1744 题目描述 给你一个由若干 0 和 1 组成的二维网格 grid&#xff0c;请你找出边界全部由 1 组成的最大 正方形 子网格&#xff0c;并返回该子网格中的元素数量。 如果不存在&#xff0c;则返回 0。…...

编程日记 2023/2/18 19:18:50

Bing+ChatGPT 对传统搜索引擎的降维打击

早些时候申请了新版 Bing 的内测资格&#xff0c;终于收到了通过的邮件。 一天的体验之后&#xff0c;我的感受是&#xff1a;当新版 Bing 具备了 ChatGPT 的聊天能力之后&#xff0c;它的能力不论是对传统搜索引擎&#xff0c;还是 ChatGPT 自身&#xff0c;都将是降维打击。 …...

编程日记 2023/2/18 19:17:21

【JS】数组常用方法总结-功能、参数、返回值

数组常用方法总结-功能、参数、返回值 用简单的js示例 运行在线工具&#xff1a;链接: 菜鸟工具 菜鸟工具示意图&#xff1a; ![在这里插入图片描述](https://img-blog.csdnimg.cn/de8589eb1acf42abb0347d8a3a3bbdfa.png 1.会改变原有数组方法 &#xff08;1&#xff09;pu…...

编程日记 2023/2/18 19:16:11

pytest 单元测试前后置处理

文章目录方法1 setup/teardown方法2 fixture 夹具方法3 conftest.py测试用例执行前后的一些处理动作&#xff0c;也叫夹具。以下介绍使用前后置操作的几种方法。方法1 setup/teardown setup&#xff0c;每个测试用例执行前要进行的处理。 teardown&#xff0c;每个测试用例执行…...

编程日记 2023/2/18 19:14:59

汽车安全硬件扩展 AUTOSAR SHE SecureHardwareExtensions

SHE&#xff08;Secure Hardware Extension&#xff09;在车联网中&#xff0c;被应用在车端ECU中负责安全存储与安全计算。是由HIS&#xff08;由Audi、BMW、Porsche、Volkswagen组成&#xff09;制定的标准&#xff0c;中文意思“安全硬件扩展”&#xff0c;是对任何给定微控…...

编程日记 2023/2/18 19:13:41

2023年美国大学生数学建模C题:预测Wordle结果建模详解+模型代码

目录 前言 一、题目理解 背景 解析 字段含义&#xff1a; 建模要求 二、建模思路 灰色预测&#xff1a; ​编辑 二次指数平滑法&#xff1a; person相关性 只希望各位以后遇到建模比赛可以艾特认识一下我&#xff0c;我可以提供免费的思路和部分源码&#xff0c;以后…...

编程日记 2023/2/18 19:12:29

5、HAL库驱动W25Qxx

一、 SPI通信驱动W25Qxx 1、使用驱动文件快速配置工程代码驱动W25Qxx &#xff08;此驱动文件只适合W25Qxx 16M及以下型号&#xff0c;因为访问地址位数不同&#xff09; 注&#xff1a;本次使用SPI的方式进行访问W25Qxx Flash进行数据读写&#xff0c;关于W25Qxx芯片不会做…...

编程日记 2023/2/18 19:11:19

git rebase 洐合（变基）

洐合 把一个分支整合到另一个分支的办法有两种&#xff1a;merge&#xff08;合并&#xff09; 和 rebase&#xff08;衍合&#xff09; 为什么使用&#xff1f; 使提交记录更简洁 三种情况 第一种&#xff1a; 合并多条commit记录 git rebase -i HEAD~合并数量 HEAD~3&a…...

编程日记 2023/2/18 19:09:59

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 集…...

编程日记 2023/2/18 19:08:47

AJAX技术

AJAX技术 浏览器是多进程的&#xff0c;简单的说就是&#xff0c;浏览器每打开一个标签页&#xff0c;就相当于创建了一个独立的浏览器进程。但是js是基于单线程的&#xff0c;而这个线程就是浏览器的js引擎&#xff0c;浏览器无论在什么时候都只且只有一个线程在运行JavaScri…...

编程日记 2023/2/18 19:07:33

华为OD机试 - 最大排列（JS）

最大排列 题目 给定一组整数&#xff0c;重排序后输出一个最大的整数 输入 数字组合 输出 最大的整数 示例一 输入 10 9输出 910解题思路 我们可以读入一个字符串&#xff0c;将字符串中的单词按照每个单词的字典序长度&#xff0c;字典序从大到小的顺序排序&#x…...

编程日记 2023/2/18 19:06:05

Prometheus Docker安装及监控自身

前提环境&#xff1a; Docker环境 涉及参考文档&#xff1a; 安装Prometheus开始 Prometheusnode_exporter Agent组件 一、部署Prometheus 1、启动容器将文件拷贝出来 docker run -d prom/prometheus2、容器将文件拷贝出来 docker cp 容器ID:/usr/share/prometheus/conso…...

编程日记 2023/2/18 19:04:57

点云处理PCL常用函数与工具

点云处理PCL常用函数与工具 文章目录点云处理PCL常用函数与工具前言一、点云读取与保存数据读取数据保存自定义的点云保存格式二、点云显示点云显示-根据颜色点云显示-根据指定轴数值点云显示-根据指定信息显示多组点云显示三、点云滤波直通滤波统计滤波均匀下采样滤波VoxelGri…...

编程日记 2023/2/18 19:01:54

FyListen 在 MVP 架构中的内存优化表现

FyListen 在 MVP 中的内存优化表现 本文只是分享个人开源框架的内存优化测试&#xff0c;你可以直接跳到最后&#xff0c;参考内存泄漏的分析过程&#xff01; 项目地址&#xff1a; https://github.com/StudyNoteOfTu/fylisten2-alpha1 由于使用到 AOP&#xff0c;所以直接…...

编程日记 2023/2/18 19:00:40

Qt代码单元测试以及报告生成

简介 单元测试是所有测试中最底层的一类测试&#xff0c;是第一个环节&#xff0c;也是最重要的一个环节&#xff0c;是唯一一次有保证能够代码覆盖率达到100%的测试&#xff0c;是整个软件测试过程的基础和前提&#xff0c;单元测试防止了开发的后期因bug过多而失控&#xff0…...

编程日记 2023/2/18 18:59:28

vscode构建Vue3.0项目(vite,vue-cli)

构建Vue3.0项目构建Vue3.0项目1.使用Vite构建vue项目的方法以及步骤1. 安装vite2. 运行vite vue 项目3.说明2.使用vue-cli构建vue项目的方法以及步骤1.安装全局vue cli —— 脚手架2、VSCode3.报错4.运行构建Vue3.0项目 1.使用Vite构建vue项目的方法以及步骤 1. 安装vite n…...

编程日记 2023/2/18 18:58:18

【2023】华为OD机试真题Java-题目0215-优雅数组

优雅数组 题目描述 如果一个数组中出现次数最多的元素出现大于等于 k k k 次，被称为k-优雅数组， k k k 也可以被称为优雅阈值。 例如，数组[1, 2, 3, 1, 2, 3, 1]，它是一个3-优雅数组，因为元素1出现次数大于等于3次...

编程日记 2023/2/18 18:57:04

通过Prowork每日自动提醒待处理工作任务

对于中小团队来说&#xff0c;由于不需要繁琐的流程和高频的异地沟通&#xff0c;需要一款更适合中小团队的日程和项目管理工具。而Prowork就是这样一款敏捷高效的协同平台。Prowork与以往各种项目管理⼯具最⼤的不同在于&#xff0c;其弱化流程和弱化权限的特性&#xff0c;不…...

编程日记 2023/2/18 18:55:56

Linux自定义系统服务

文章目录一. Linux系统服务二. 自定义系统服务一. Linux系统服务 Linux 系统服务有时也称为守护程序&#xff0c;是在Linux启动时自动加载并在Linux退出时自动停止的系统任务&#xff0c;CentOS 7.x开始&#xff0c;CentOS开始使用 systemd服务来代替 daemon &#xff0c;原来…...

编程日记 2023/2/18 18:54:39

mongodb lambda 查询插件

需求背景需要一个像mybatis plus 一样的基于lambda, 且面向对象的查询mongo数据的插件。在网上找了很久&#xff0c;没有发现有类似功能的插件。于是自己手写了一个&#xff0c;借助mongoTemplate屏蔽了底层查询语句的实现细节。在此基础上&#xff0c;实现了查询的统一封装。技…...

编程日记 2023/2/18 18:53:27

C++设计模式(16)——责任链模式

亦称&#xff1a; 职责链模式、命令链、CoR、Chain of Command、Chain of Responsibility 意图 责任链模式是一种行为设计模式&#xff0c; 允许你将请求沿着处理者链进行发送。 收到请求后&#xff0c; 每个处理者均可对请求进行处理&#xff0c; 或将其传递给链上的下个处理…...

编程日记 2023/2/18 18:52:20

springmvc+jsp电影院购票售票选座推荐网站java ssm

本电影购票推荐网站以SSM作为框架&#xff0c;B/S模式以及MySql作为后台运行的数据库。本系统主要包括以下功能模块&#xff1a;个人中心、用户管理、电影信息管理、电影类型管理、影院信息管理、系统管理、订单管理等模块&#xff0c;通过这些模块的实现能够基本满足日常电影购…...

编程日记 2023/2/18 18:51:12

免费域名怎么做网站/网站seo推广优化

1 今天自动添加了一些主机&#xff0c;发现有一个是红色的&#xff0c;而且是网络是可以通的&#xff0c;其他机器都很好&#xff0c;重启了还是问题依旧2 于是想用zabbix_get试一下[rootZabbix-Server ~]# zabbix_get -s 90.90.90.118 -k system.cpu.switches zabbix_get [100…...

编程日记 2024/11/5 8:38:01

网络品牌推广方法有哪些/seo优化排名公司

1&#xff1a;ajax的概念全称&#xff1a;AsynchronousJavascriptAndXmlAJAX不是一种新的编程语言&#xff0c;而是一种用于创建更快更好以及交互性更强的WEB应用程序技术&#xff0c;该技术在98年前后得到了应用。通过AJAX&#xff0c;你的JS可以通过JS的XMLHttpRequest对象在…...

编程日记 2024/11/5 7:05:07

临沂做网站建设的公司/seo自媒体培训

今日受朋友之托&#xff0c;为其友人安装几台无线路由。因其原已在使用中&#xff0c;而且因为电源问题导致几台设备故障&#xff0c;无法工作。故此次只需将新无线路由器填上原空缺即告完成。但在填补完空缺后&#xff0c;发生了一个很奇怪的现象。故在此对该现象凭借对无线的…...

编程日记 2024/11/5 7:01:02

齐诺网站建设/网络销售怎么聊客户

本文来自:江清清的技术专栏(http://www.lcode.org) (一)前言 现阶段大家在使用React Native开发项目的时候&#xff0c;基本都会使用到微信好友或者微信朋友圈分享功能吧&#xff0c;那么今天我就带大家实现以下RN微信好友以及朋友圈的分享功能。 刚创建的React Native交流6群:…...

编程日记 2024/11/5 4:52:58

电影网站的建设目标/网站流量查询平台

hinkPHP的CURD操作中有很多非常实用的方法&#xff0c;从这篇开始&#xff0c;我们会为大家一一介绍。首先为大家介绍下field方法的用法。field属于模型的连贯操作方法之一&#xff0c;主要目的是标识要返回或者操作的字段&#xff0c;可以用于查询和写入操作。 1、用于查询 在…...

编程日记 2024/11/5 3:29:39

世界杯网站建设/网络推广主要工作内容

指针运算 例1 #include <stdio.h>int main (void) {int a 0;int *p &a;printf("%p, %p, %p",p,p1,p2);return 0;}输出结果&#xff1a; **指针变量可以计算&#xff0c;如果int 类型加一&#xff0c;变化4个整数&#xff0c;如果char 加一&#xff0c…...

编程日记 2024/11/5 3:23:31