IntersectionObserver

IntersectionObserver 这个API主要实现图片懒加载、加载更多等等。
该API作用是观察两个元素之间有没有交叉,有没有重叠

现在要做的是当图片跟视口有交叉的情况下,把data-src的图片路径替换给src属性

//第一个参数是 回调,第二个参数的 配置
const ob = new IntersectionObserver((entries)=>{
for (const entry of entries){
//若true有交叉
if (entry.isIntersecting){
//获取目标图片元素
const img = entry.target
img.src = img.dataset.src
ob.unobserve(img)
}
}
},{
root:null , //表示观察器观察的元素和 哪个 元素发生交叉,它需要去监控;它只能配置它的父元素或者父元素的父元素;一般情况下都配置为null,这样就是监控目标元素和 视口元素 的交叉情况;null也是默认值,可以不写。
rootMargin: 0,//对目标元素的观察范围进行扩散还是收缩,默认值为0,也可以不写
threshold: 0,//表示到达多少 阈值 的时候,触发回调函数;比如1表示,元素完全进入到root元素,离开的时候也会再触发一次。这个是必须要写的,这里写0,表示一触碰就进行回调
})

const imgs = document.querySelectorAll(‘img[data-src]’)
// 你提供的代码是使用JavaScript和DOM(文档对象模型)来选择具有data-src属性的所有元素。querySelectorAll方法用于查找并返回与提供的CSS选择器匹配的所有元素的列表,在这种情况下是’img[data-src]'。
imgs.forEach((img) => {
ob.observe(img)
})

// 下面是加载更多
const ob2 = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting){
loadMoreImages(10); //若出现加载更多图标,则再请求10张图片
}
},{
threshold:0
})
ob2.observe(document.querySelector(‘.spin’)) //对spin类进行观察

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/618692.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS4.0 系列——06、渲染之条件渲染、循环渲染以及懒加载渲染

HarmonyOS4.0 系列——06、渲染之条件渲染、循环渲染以及懒加载渲染 if/else:条件渲染 ArkTS 提供了渲染控制的能力。条件渲染可根据应用的不同状态,使用 if、else 和 else if 渲染对应状态下的 UI 内容。 写法和 TS 的一样,简单看一下即可…

【数据结构之树和二叉树】

数据结构学习笔记---007 数据结构之树和二叉树概念篇1、树的概念和结构1.1、树的相关概念1.2、树的存储结构 2、二叉树概念及结构2.1、二叉树概念2.2、满二叉树2.3、完全二叉树2.4、满二叉树或完全二叉树的存储形式 3、堆的概念及结构3.1、堆的性质3.2、堆的意义 4、二叉树的存…

python_selenium_安装基础学习

目录 1.为什么使用selenium 2.安装selenium 2.1Chrome浏览器 2.2驱动 2.3下载selenium 2.4测试连接 3.selenium元素定位 3.1根据id来找到对象 3.2根据标签属性的属性值来获取对象 3.3根据xpath语句来获取对象 3.4根据标签的名字获取对象 3.5使用bs4的语法来获取对象…

解惑:测试圈网红工具 Jmeter 到底难在哪里

作为一名测试人员,你是否也曾经遇到过这些问题: 同样的起点,同样的工作时间,为什么别人接那么多项目,你还是在点点点;为什么别人升职了,而你还在原地踏步? 同样的工作内容&#xf…

GNU Tools使用笔记

GCC命令选项 预处理器选项 -M选项 作用:生成源文件的依赖关系,包含了该源文件所有的依赖,默认会发送到标准输出(stdout)。 示例1:在ubuntu中,新建如下main.c、main.h、head1.h、head2.h文件。…

数据库的数据类型

文章目录 前言一、数据类型数据类型分类数值类型bit类型小数类型floatdecimal 字符串类型charvarcharchar和varchar比较 日期和时间类型enum和set 前言 一、数据类型 数据类型分类 数值类型 下面我们来创建一个表,表中创建一个tinyint类型的数据。当我们不指定tiny…

【贪心】重构字符串

/*** 思路:如果s长度小于2,直接返回s,假设字符串s的长度为n。* n为偶数,如果字符串中的某个字符数量超过 n/2 则肯定会存在相邻的字符。* n为奇数,如果字符串中的某个字符的数量超过 (n1&am…

机器学习顶会ICML 2024今日开放投稿,CCF A类,中稿率27.94%(附ICML23杰出论文+18篇高分论文)

ICML 2024今天开放投稿了!距离截稿还有24天,想冲ICML的同学速度! ICML 全称 International Conference on Machine Learning,由国际机器学习学会(IMLS)举办,与NIPS一同被认为是人工智能、机器学…

debian 11 arm64 aarch64 D2000 平台编译 box86 box64 笔记

参考资料 https://github.com/ptitSeb/box86/blob/master/docs/COMPILE.md 源码地址 GitHub - ptitSeb/box86: Box86 - Linux Userspace x86 Emulator with a twist, targeted at ARM Linux devices deb在线源地址(打不开): Itais box86…

腾讯云免费服务器怎么申请?腾讯云免费服务器申请难吗?

腾讯云免费服务器申请入口 https://curl.qcloud.com/FJhqoVDP 免费服务器可选轻量应用服务器和云服务器CVM,轻量配置可选2核2G3M、2核8G7M和4核8G12M,CVM云服务器可选2核2G3M和2核4G3M配置,腾讯云服务器网txyfwq.com分享2024年最新腾讯云免费…

C++ 具名要求-全库范围的概念 - 一种等价关系(operator==)- 是一种严格弱序关系(operator< )

此页面中列出的具名要求,是 C 标准的规范性文本中使用的具名要求,用于定义标准库的期待。 某些具名要求在 C20 中正在以概念语言特性进行形式化。在那之前,确保以满足这些要求的模板实参实例化标准库模板是程序员的重担。若不这么做&#xf…

一文解析低代码平台

一、低代码概念 低代码开发平台是一种无需编码或者只需要少量代码即可快速生成应用程序的开发平台,通过可视化进行应用程序开发的方法,让不同经验水平的开发人员可以通过图形化的用户界面,使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程…

MySQL夯实之路-存储引擎深入浅出

innoDB Mysql4.1以后的版本将表的数据和索引放在单独的文件中 采用mvcc来支持高并发,实现了四个标准的隔离级别,默认为可重复读,并且通过间隙锁(next-key locking)策略防止幻读(查询的行中的间隙也会锁定…

Redis:原理速成+项目实战——Redis实战13(GEO实现附近商铺、滚动分页查询)

👨‍🎓作者简介:一位大四、研0学生,正在努力准备大四暑假的实习 🌌上期文章:Redis:原理速成项目实战——Redis实战12(好友关注、Feed流(关注推送)、滚动分页查…

基于ssm的校园预点餐系统(有报告)。Javaee项目。ssm项目。

演示视频: 基于ssm的校园预点餐系统(有报告)。Javaee项目。ssm项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构,通过Spring Sp…

案例分享:游戏行业各岗位的KPI绩效指标制定

在游戏行业中,岗位种类繁多,每个岗位的职责和要求都有所不同。因此,制定合理的KPI(关键绩效指标)是确保团队高效运作的关键。 在竞争激烈的市场环境中,合理的KPI不仅有助于员工明确工作方向,还…

Pandas实战100例 | 案例 37: 从长格式转换为宽格式

案例 37: 从长格式转换为宽格式 知识点讲解 数据格式转换是数据处理中的一个常见需求。Pandas 提供了将数据从长格式(每行是一个观测值)转换为宽格式(每个观测值成为一列)的功能。 长格式转宽格式: 使用 pivot 方法可以将数据从…

大语言模型向量数据库

大语言模型&向量数据库 LARGE LANGUAGE MODELSA. Vector Database & LLM WorkflowB. Vector Database for LLMC. Potential Applications for Vector Database on LLMD. Potential Applications for LLM on Vector DatabaseE. Retrieval-Based LLMF. Synergized Exampl…

element+vue 之图片放大器

1.安装插件 npm install vue-photo-zoom-pro2.main.js导入 // 放大镜 import VuePhotoZoomPro from vue-photo-zoom-pro Vue.use(VuePhotoZoomPro)3.页面使用 <vue-photo-zoom-pro:url"imgUrl":out-zoomer"true":scale"2"style"width:…

Leetcode202快乐数(java实现)

今天分享的题目是快乐数&#xff1a; 快乐数的定义如下&#xff1a; 快乐数&#xff08;Happy Number&#xff09;是指一个正整数&#xff0c;将其替换为各个位上数字的平方和&#xff0c;重复这个过程直到最后得到的结果为1&#xff0c;或者无限循环但不包含1。如果最终结果为…