使用IntersectionObserver 实现懒加载 && 记录一个懒加载失效的原因
先说说我实现懒加载失效的一个原因:
是图片没有写高度
猜想是没有给图片高度,所以底层没法进行计算 容器是否出现在视图中
IntersectionObservers作用
提供了一种异步观察目标元素与其祖先元素或顶级文档视窗 (viewport) 交叉状态的方法,观察目标元素是否出现在视图窗口
实现一个IntersectionObserver
// 配置参数请看下面
// root:视图根节点,不填默认为浏览器窗口
// rootMargin:缩小或扩大根元素的区域,默认值为"0px 0px 0px 0px",只能用px或百分比
// threshold:可以给0 - 1 之间的数 0 元素刚进入窗口 1 完全进入窗口
const config = {
root: null,
rootMargin: '0px',
threshold: 0
}
const io = new IntersectionObserver(
callback,
config
)
IntersectionObserver 提供的api
- 开始监听一个目标元素
io.observe(element)
- 停止监听特定目标元素
io.unobserve(element)
- 使
IntersectionObserver
对象停止监听工作,停止观察服务
io.disconnect()
懒加载代码示例
html
<img src="" data-src="https://img1.baidu.com/it/u=3498480268,360056650&fm=253&fmt=auto&app=138&f=PNG?w=662&h=500" alt="">
js
const imgs = Array.from(document.querySelectorAll('img[data-src]'))
const config = {
rootMargin: '0px',
threshold: 0,
}
const io = new IntersectionObserver((entries, self) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
let img = entry.target
let src = img.dataset.src
if (src) {
img.src = src
img.removeAttribute('data-src')
}
// 解除观察
self.unobserve(entry.target)
}
})
}, config)
imgs.forEach((image) => {
io.observe(image)
})
- 先说说我实现懒加载失效的一个原因:
- IntersectionObservers作用
- 实现一个IntersectionObserver
- IntersectionObserver 提供的api
- 懒加载代码示例
本文来自博客园,作者:时光凉忆,转载请注明原文链接:https://www.cnblogs.com/naturl/p/16635658.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)