前言
一次偶然机会做到图片懒加载，常规操作就是监听scroll事件，获取img元素相对于视口的顶点的位置el.getBoundingClientRect().top,只要这个值小于视口的高度window.innerHeight就说明进入了可视区域,这个时候就可以加载图片了。但是scroll事件计算量太大密集影响性能，经查阅资料发现浏览器的API,IntersectionObserver交叉观察器,可自动观察目标元素与根元素交叉区域变化，以此判断元素可见，利用这个岂不是就能实现懒加载。后来又遇到设置异步组件dom高度，并且要有transition动画效果，看了同事的方式始终觉得不太好，外部会操作到组件内部的方法才能设置高度,后来我调研查阅资料，知道了MutationObserverAPI。郁闷，，，索性了解下浏览器的观察器吧。
阅读更多...
