当前位置:网站首页>Better performance and simpler lazy loading of intersectionobserverentry (observer)
Better performance and simpler lazy loading of intersectionobserverentry (observer)
2022-07-29 07:33:00 【Moon and stars】
( The following are personal understandings used in the project , If you have any mistakes, please correct them )
IntersectionObserverEntry It is used to observe the interaction degree of two nodes
One 、 Get the observed node
Triggered when the observed node enters the visual interface
var target = document.getElementById('xxx')
Two 、 Create observers
var loadingObserver = new IntersectionObserver(ObserverList=>{
// ObserverList Is an array of observed nodes , Of each of these elements isIntersecting Represents entry or exit
if(ObserverList[0].isIntersecting){
console.log(' Being loaded ...')
}
},{
// The degree to which the two goals overlap
threshold: 0.1,
// root by null Or when not writing, it defaults to the browser visual interface
root: null
})
3、 ... and 、 Add the observed target
// target Will be inserted above ObserverList in
loadingObserver.observe(target)
// Multiple can be added
loadingObserver.observe(target1)
loadingObserver.observe(target2)
边栏推荐
- LANDSCAPE
- 7-2 calculate the area and perimeter of a regular pentagon (25 points)
- SEGGER 的硬件异常 分析
- 3-全局异常处理
- [100 cases of unity practice] the single choice multiple choice judgment questions of unity universal question answering system are all common
- 09 bloom filter
- 请问flink支持sqlServer数据库么?获取sqlServer数据库的变化
- Leetcode buckle classic problem -- 4. Find the median of two positively ordered arrays
- QT basic day 2 (2) QT basic components: button class, layout class, output class, input class, container and other individual examples
- RoBERTa:A Robustly Optimized BERT Pretraining Approach
猜你喜欢
电子元器件贸易企业如何借助ERP系统,解决仓库管理难题?
RoBERTa:A Robustly Optimized BERT Pretraining Approach
Job 7.28 file IO and standard IO
QT topic: basic components (button class, layout class, output class, input class, container class)
关于大龄读博的几点回答?
2022年深圳杯A题破除“尖叫效应”与“回声室效应”走出“信息茧房”
Meizhi optoelectronics' IPO was terminated: annual revenue of 926million he Xiangjian was the actual controller
Scala higher order (IX): pattern matching in Scala
A long article --- in-depth understanding of synchronized
thinkphp6 实现数据库备份
随机推荐
Leetcode 209. subarray with the smallest length (2022.07.28)
2-unified return class dto object
stm32 操作W25Q256 W25Q16 spi flash
Scala higher order (10): exception handling in Scala
How can electronic component trading enterprises solve warehouse management problems with ERP system?
梳理市面上的2大NFT定价范式和4种解决方案
QT topic: basic components (button class, layout class, output class, input class, container class)
[100 cases of unity practice] the single choice multiple choice judgment questions of unity universal question answering system are all common
PAT甲级 1150 旅行商问题
How to use GS_ Expansion expansion node
[summer daily question] Luogu p4413 [coci2006-2007 2] R2
Segger's hardware anomaly analysis
Thinkphp6 realizes database backup
Job 7.28 file IO and standard IO
【暑期每日一题】洛谷 P6320 [COCI2006-2007#4] SIBICE
[summer daily question] Luogu p6336 [coci2007-2008 2] bijele
【暑期每日一题】洛谷 P4413 [COCI2006-2007#2] R2
7-2 计算正五边形的面积和周长 (25分)
Prometheus and grafana
@Detailed explanation of requestmapping usage