IntersectionObserver接口介绍
IntersectionObserver
API 是浏览器提供的一个用于异步观察目标元素与其祖先元素或视口(Viewport)交叉状态(即是否进入或离开视口)的接口。在 IntersectionObserver
出现之前,开发者通常需要通过监听 scroll
事件或使用 getBoundingClientRect
方法来判断元素是否进入视口。
IntersectionObserver
的基本用法
(1) 创建观察器
通过 new IntersectionObserver()
创建一个观察器实例。
const observer = new IntersectionObserver(callback, options);
-
callback
:
当目标元素的交叉状态发生变化时触发的回调函数。 -
options
:
配置对象,用于指定观察器的行为(可选)。
(2) 观察目标元素
通过 observer.observe()
开始观察目标元素。
const target = document.querySelector('.target');
observer.observe(target);
(3) 停止观察
通过 observer.unobserve()
停止观察目标元素。
observer.unobserve(target);
IntersectionObserver
的回调函数
回调函数会在以下情况下触发:
-
目标元素进入或离开视口。
-
目标元素的交叉比例(intersection ratio)发生变化。
回调函数接收两个参数:
-
entries
:一个IntersectionObserverEntry
对象的数组,每个对象描述了一个目标元素的交叉状态。 -
observer
:观察器实例本身。
IntersectionObserverEntry
对象的属性
IntersectionObserver
的配置选项
options
是一个可选对象,可以包含以下属性:
const options = {root: null, // 视口rootMargin: '0px', // 无边距threshold: [0, 0.5, 1], // 交叉比例为 0%、50%、100% 时触发回调
};const observer = new IntersectionObserver(callback, options);
使用场景
(1) 图片懒加载
当图片进入视口时,动态加载图片。
const images = document.querySelectorAll('img[data-src]');const observer = new IntersectionObserver((entries) => {entries.forEach((entry) => {if (entry.isIntersecting) {const img = entry.target;img.src = img.dataset.src; // 加载图片observer.unobserve(img); // 停止观察}});
});images.forEach((img) => observer.observe(img));
(2) 无限滚动
当用户滚动到页面底部时,加载更多内容。
const sentinel = document.querySelector('#sentinel');const observer = new IntersectionObserver((entries) => {if (entries[0].isIntersecting) {loadMoreContent(); // 加载更多内容}
});observer.observe(sentinel);
(3) 广告曝光统计
当广告进入视口时,记录曝光次数。
const ad = document.querySelector('.ad');const observer = new IntersectionObserver((entries) => {if (entries[0].isIntersecting) {logAdImpression(); // 记录广告曝光observer.unobserve(ad); // 停止观察}
});observer.observe(ad);
相关文章:

IntersectionObserver接口介绍
IntersectionObserver API 是浏览器提供的一个用于异步观察目标元素与其祖先元素或视口(Viewport)交叉状态(即是否进入或离开视口)的接口。在 IntersectionObserver 出现之前,开发者通常需要通过监听 scroll 事件或使用…...
go并发学习笔记
包含了go学习笔记,含有channel的基础学习,编写数字的平方,如何成组的合并channel,如何优雅的关闭退出并发协程,通道阻塞情况分析,channel与哪些变成情况,可谓是收藏好文. 文章目录 并发1:chann…...

DeepSeek V3 源码:从入门到放弃!
从入门到放弃 花了几天时间,看懂了DeepSeek V3 源码的逻辑。源码的逻辑是不难的,但为什么模型结构需要这样设计,为什么参数需要这样设置呢?知其然,但不知其所以然。除了模型结构以外,模型的训练数据、训练…...
关于C++数据类型char的类型是整数的思考
学习数据类型时,整数类型中有一个特殊的类型char,可以使用字符来为其赋,也可以用整数来为其赋值,这是怎么一回事?其实任何类型,在计算机的内存中,在最小的存储单元比特中,内部只有0或…...

手写识别革命:Manus AI如何攻克多语言混合识别难题(二)
一、多语种特征分离:对抗训练与解耦表示 1. 梯度反转层(GRL)实现语言无关特征提取 class GradientReversalFn(Function):staticmethoddef forward(ctx, x, alpha):ctx.alpha alphareturn x.view_as(x)staticmethoddef backward(ctx, grad_…...

windows:curl: (60) schannel: SEC_E_UNTRUSTED_ROOT (0x80090325)
目录 1. git update-git-for-windows 报错2. 解决方案2.1. 更新 CA 证书库2.2. 使用 SSH 连接(推荐)2.3 禁用 SSL 验证(不推荐) 1. git update-git-for-windows 报错 LenovoLAPTOP-EQKBL89E MINGW64 /d/YHProjects/omni-channel-…...
typedef 和 using 有什么区别?
在 C 编程中,类型别名(Type Aliases)是为已有类型定义新名称的一种机制,能够显著提升代码的可读性和可维护性。C 提供了两种工具来实现这一功能:传统的 typedef 和 C11 引入的 using 关键字。 概念 类型别名本质上是为…...

【Java学习笔记】三、运算符,表达式、分支语句和循环语句
运算符与表达式 算数运算符与算数表达式 加减运算符 操作数:2结合方向:从左到右优先级:4级 乘(*)、除(/)和取余(%)运算符 操作数:2结合方向:从左到右优先…...
广度优先遍历(BFS):逐层探索的智慧
引言:什么是广度优先遍历? 广度优先遍历(BFS)是一种用于遍历或搜索树(Tree)和图(Graph)结构的算法。其核心思想是逐层访问节点,先访问离起点最近的节点,再逐…...
网络HTTP
HTTP Network Request Library A Retrofit-based HTTP network request encapsulation library that provides simple and easy-to-use API interfaces with complete network request functionality. 基于Retrofit的HTTP网络请求封装库,提供简单易用的API接口和完…...
(七)企业级高性能 WEB 服务 - HTTPS 加密
在当今互联网时代,数据安全成为了每个企业和开发者必须关注的重点。尤其是对于Web服务来说,如何保障用户数据的安全传输是至关重要的。本文将深入探讨HTTPS加密的原理、Nginx的HTTPS配置,以及如何通过Nginx实现高性能的Web服务。 1. HTTPS加密…...

[HTTP协议]应用层协议HTTP从入门到深刻理解并落地部署自己的云服务(2)
标题:[HTTP协议]应用层协议HTTP从入门到深刻理解并落地部署自己的云服务(2) 水墨不写bug 文章目录 一、无法拷贝类(class uncopyable)的设计解释:重要思想:使用示例 二、锁的RAII设计解释重要考虑使用示例 三、基于RAII模式和互斥锁的的日志…...

MySQL(单表)知识点
文章目录 1.数据库的概念2.下载并配置MySQL2.1初始化MySQL的数据2.2注册MYSQL服务2.3启动MYSQL服务2.4修改账户默认密码2.5登录MYSQL2.6卸载MYSQL 3.MYSQL数据模型3.1连接数据库 4.SQL简介4.1SQL的通用语法4.2SQL语句的分类4.3DDL语句4.3.1数据库4.3.2表(创建,查询,修改,删除)4…...

HarmonyOS Next 属性动画和转场动画
HarmonyOS Next 属性动画和转场动画 在鸿蒙应用开发中,动画是提升用户体验的关键要素。通过巧妙运用动画,我们能让应用界面更加生动、交互更加流畅,从而吸引用户的注意力并增强其使用粘性。鸿蒙系统为开发者提供了丰富且强大的动画开发能力&…...

使用Node.js从零搭建DeepSeek本地部署(Express框架、Ollama)
目录 1.安装Node.js和npm2.初始化项目3.安装Ollama4.下载DeepSeek模型5.创建Node.js服务器6.运行服务器7.Web UI对话-Chrome插件-Page Assist 1.安装Node.js和npm 首先确保我们机器上已经安装了Node.js和npm。如果未安装,可以通过以下链接下载并安装适合我们操作系…...
Docker 部署 MongoDB 并持久化数据
Docker 部署 MongoDB 并持久化数据 在现代开发中,MongoDB 作为 NoSQL 数据库广泛应用,而 Docker 则提供了高效的容器化方案。本教程将介绍如何使用 Docker 快速部署 MongoDB,并实现数据持久化,确保数据不会因容器重启或删除而丢失…...
DeepSeek + 沉浸式翻译 打造智能翻译助手
本文详细介绍如何使用 DeepSeek API 沉浸式翻译插件打造个性化翻译助手。 一、DeepSeek API 配置 基础配置 API 基础地址:https://api.deepseek.com需要申请 API Key支持与 OpenAI SDK 兼容的调用方式 可用模型 deepseek-chat:已升级为 DeepSeek-V3&am…...
cdn取消接口缓存
添加cdn后,使用cdn加速域名访问接口 是缓存,不是最新的数据,如果使用局域网则是最新的数据,如果修改配置,确保使用cdn域名请求的接口返回不是缓存 要确保通过CDN加速域名访问接口时返回的是最新的数据,而不…...

字节跳动C++客户端开发实习生内推-抖音基础技术
智能手机爱好者和使用者,追求良好的用户体验; 具有良好的编程习惯,代码结构清晰,命名规范; 熟练掌握数据结构与算法、计算机网络、操作系统、编译原理等课程; 熟练掌握C/C/OC/Swift一种或多种语言ÿ…...

OpenHarmony子系统开发编译构建指导
OpenHarmony子系统开发编译构建指导 概述 OpenHarmony编译子系统是以GN和Ninja构建为基座,对构建和配置粒度进行部件化抽象、对内建模块进行功能增强、对业务模块进行功能扩展的系统,该系统提供以下基本功能: 以部件为最小粒度拼装产品和独…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...

ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

Web后端基础(基础知识)
BS架构:Browser/Server,浏览器/服务器架构模式。客户端只需要浏览器,应用程序的逻辑和数据都存储在服务端。 优点:维护方便缺点:体验一般 CS架构:Client/Server,客户端/服务器架构模式。需要单独…...
【SpringBoot自动化部署】
SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一,能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时,需要添加Git仓库地址和凭证,设置构建触发器(如GitHub…...
离线语音识别方案分析
随着人工智能技术的不断发展,语音识别技术也得到了广泛的应用,从智能家居到车载系统,语音识别正在改变我们与设备的交互方式。尤其是离线语音识别,由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力,广…...