new IntersectionObserver 使用笔记

MDN API

文档链接

随着网页发展，对检测某个（些）元素是否出现在可视窗相关的需求越来越多了？比如：

当页面滚动时，懒加载图片或其他内容。
实现“可无限滚动”网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。
对某些元素进行埋点曝光
滚动到相应区域来执行相应动画或其他任务。

一直以来，检测元素的可视状态或者两个元素的相对可视状态都不是件容易事，大部分解决办法并不完全可靠，实现方式很丑陋，也极易拖慢整个网站的性能。
IntersectionObserver正因此而生

需求 : 对某些元素进行埋点曝光

reportDatail() 方法对容器内容进行监听
如果dom 初始化存在则在mounted() 进行监听即可;
如果 dom 是组件是根据请求返回的data 然后再渲染组件dom 则该方法使用在请求返回后

 asiosDemo(){...请求if(success) {this.list = data //返回的数据 然后list 对组件进行渲染this.$nextTick(() => {this.reportDatail()})}}

methods:{reportContent(index, name) {console.log('曝光内容请求', index, name)},// 对dom 进行监听reportDatail() {// 容器domconst dom = document.querySelector('.monitor-list')setTimeout((_) => {this.$_reportContent({observeNodes: dom,childNodes: dom.querySelectorAll('.content-task-item') // 监听子元素dom},// 回调函数 对返回的数据做埋点处理this.reportContent)}, 0)},$_reportContent(options, callBackFn) {// observeNodes 容器元素dom// childNodes 被监听的曝光子元素domconst { observeNodes, childNodes } = optionsconst io = new IntersectionObserver(function(entrier) {entrier.forEach((el, i) => {if (el.isIntersecting) {// _index _name 是子元素dom 创建的值let _index = el.target.getAttribute('data-index')let _name = el.target.getAttribute('data-name')callBackFn(_index, _name)// 监听的元素进行解绑 io.unobserve(el.target)}})},{root: observeNodes,rootMargin: '0px'})if (childNodes && childNodes.length !== 0) {childNodes.forEach((el) => {let _index = el.getAttribute('data-index') * 1// this.exposureList记录最新的曝光内容 之前曝光过的不再监听if (this.exposureList.includes(_index)) {io.observe(el)}})}},
}

new IntersectionObserver 使用笔记相关推荐

前端项目总结干货 + 渡一、coderwhy、黑马、尚硅谷实操笔记（第二版，持续更新中~~~）
前端学习笔记(温馨提示:最好根据目录查看笔记) 构建vite.vue项目 1.npm create vite@latest my-vue-app 2.vue create vue01 知识储备响应式 ...
【读书笔记】知易行难，多实践
前言: 其实,我不喜欢看书,只是喜欢找答案,想通过专业的解答来解决我生活的困惑.所以,我听了很多书,也看了很多书,但看完书,没有很多的实践,导致我并不很深入在很多时候. 分享读书笔记: <高效1 ...
【运维学习笔记】生命不息，搞事开始。。。
001生命不息,搞事不止!!! 这段时间和hexesdesu搞了很多事情! 之前是机械硬盘和固态硬盘的测速,我就在那默默的看着他一个硬盘一个机械测来测去. 坐在他后面,每天都能看到这位萌萌的小男孩,各 ...
SSAN 关系抽取论文笔记
20210621 https://zhuanlan.zhihu.com/p/353183322 [KG笔记]八.文档级(Document Level)关系抽取任务共指id嵌入一样但是实体嵌入的时候 ...
pandas以前笔记
# -*- coding: utf-8 -*- """ Created on Sat Jul 21 20:06:20 2018@author: heimi "& ...
PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
王道考研计算机网络笔记第六章：应用层
本文基于2019 王道考研计算机网络: 2019 王道考研计算机网络个人笔记总结第一章:王道考研计算机网络笔记第一章:概述&计算机网络体系结构第二章:王道考研计算机网络笔记第 ...

new IntersectionObserver 使用笔记

MDN API

需求 : 对某些元素进行埋点曝光

new IntersectionObserver 使用笔记相关推荐

最新文章

热门文章