图片懒加载之React + Intersection Observer API – 交叉观察器实现懒加载

文章浏览阅读388次。判断元素是否进入视口从而来实现懒加载,因为用到了scroll的监听事件,因此频繁触发、调用可能会造成性能问题。创建一个IntersectionObserver.observe对象,当其监听到目标元素的可见部分(的比例)超过了一个或多个阈值(threshold)时,会执行指定的回调函数。被创建,则无法更改其配置,所以一个给定的观察者对象只能用来监听可见区域的特定变化值;,因为判断元素是否可见的本质就是看目标元素是否与根元素或视口产生了交叉。对象被创建时,其被配置为监听根中一段给定比例的可见区域。