intersectionObserve 交叉观察

这是浏览器提供的一个api,目标元素和浏览器可视区域之间的一个交叉区域 ,intersectionObserve就是观察交叉区域的情况

window.innerHeight 是浏览器可视窗口的高度

**getBoundingClientReact().top**     是目标元素到浏览器可视区域顶部的距离       

---

这个区域需要一个实例对象来观察

---

第一步:声明实例对象,变量observe赋值
第二步: 开始观察 observe.observe(dom节点)
第三步: 结束观察 有开始就有结束 observe.unobserve(dom节点)
实例对象里面有两个参数,现在只关注第一个参数, 这个回调函数 会在看到和看不到两个情况下触发

---

案例:

---

第一步:定义一个dom元素的伪数组
第二步: scroll 添加时间监听 在函数里内部循环遍历 伪数组图片
判断条件就是 目标元素 距离视口最上面的距离 是否小于浏览器 window.innerHeight 的高度
满足条件就出发函数
第三步: 这里使用到getAttribute和setAttribute的方法 也就是自定义指令

这种方式虽然可以出发,但是这种状态会触发很多次,非常消耗资源 所以intersectionObserve 这种方式就出现了

第一步: 使用queryselectorALL()获取说有的image 标签 声明变量接收 伪数组
第二步: 声明observe的实例方法 new interselectionobserve()方法
第三步: 开始使用foreach 来遍历 伪数组 函数体内部开始观察 observe.observe()
第四步: 声明callback 变量 作为参数传入实例对象 箭头函数 内的参数 entries
entries作位数组进行遍历, 判断条件为entry.isIntersecting
在函数体内部进行 结束这个目标元素的观察 observe.unonserve()也就是说 这个dom元素已经出发 不会再出发第二次 这也就是 这种方法和上面的区别