当前位置:网站首页>性能更佳、使用更简单的懒加载IntersectionObserverEntry(观察者)
性能更佳、使用更简单的懒加载IntersectionObserverEntry(观察者)
2022-07-29 07:16:00 【揽月zhai星辰】
(以下都是个人在项目中使用的理解,有错欢迎指正)
IntersectionObserverEntry用于观察两个节点的交互程度
一、获取被观察节点
当被观察节点进入可视界面时触发
var target = document.getElementById('xxx')
二、创建观察者
var loadingObserver = new IntersectionObserver(ObserverList=>{
// ObserverList是被观察节点的数组,其中每个元素的isIntersecting代表进入还是退出
if(ObserverList[0].isIntersecting){
console.log('正在加载...')
}
},{
// 两个目标重叠的程度
threshold: 0.1,
// root 为null或者不写时默认为浏览器可视界面
root: null
})
三、添加被观察目标
// target 将被插入 上面的ObserverList 中
loadingObserver.observe(target)
// 可以添加多个
loadingObserver.observe(target1)
loadingObserver.observe(target2)
边栏推荐
- Gin routing, parameters, output
- [summer daily question] Luogu p4414 [coci2006-2007 2] ABC
- 09 bloom filter
- Docker最新超详细教程——Docker创建运行MySQL并挂载
- 美智光电IPO被终止:年营收9.26亿 何享健为实控人
- 7-2 calculate the area and perimeter of a regular pentagon (25 points)
- [daily question in summer] Luogu p6408 [coci2008-2009 3] pet
- Calculate program run time demo
- H3C_ Using setting default static routing priority to realize the active and standby function of export dual lines
- stm32 操作W25Q256 W25Q16 spi flash
猜你喜欢
Leetcode buckle classic problem -- 4. Find the median of two positively ordered arrays
QT基础第二天(2)qt基础部件:按钮类,布局类,输出类,输入类,容器等个别举例
零数科技深度参与信通院隐私计算金融场景标准制定
Scala higher order (IX): pattern matching in Scala
JS chicken laying eggs and egg laying chickens. Who appeared earlier, object or function? Is function an instance of function?
Scala 高阶(十):Scala中的异常处理
女研究生做“思维导图”与男友吵架!网友:吵架届的“内卷之王”....
WPF interface layout must know basis
3-全局异常处理
Docker最新超详细教程——Docker创建运行MySQL并挂载
随机推荐
国内数字藏品的乱象与未来
Prometheus与Grafana
CDC source can quit after reading MySQL snapshot split
Use of gcc/g++
【暑期每日一题】洛谷 P7760 [COCI2016-2017#5] Tuna
ef core 读取text类型慢_ef core读取大字符串字段慢
mysql 单表最多能存多少数据?
logback filter过滤器简介说明
如何与斯堪尼亚SCANIA建立EDI连接?
Introduction and introduction of logback
Thinkphp6 realizes database backup
分析25个主要DeFi协议的路线图 预见DeFi未来的七大趋势
7-2 计算正五边形的面积和周长 (25分)
Life cycle hooks in routing - activated and deactivated
【暑期每日一题】洛谷 P1601 A+B Problem(高精)
[summer daily question] Luogu p6336 [coci2007-2008 2] bijele
2-unified return class dto object
美智光电IPO被终止:年营收9.26亿 何享健为实控人
【WPF】通过动态/静态资源实现语言切换
【暑期每日一题】洛谷 P6461 [COCI2006-2007#5] TRIK