面试-Vue lazyload

245 阅读1分钟

checkInView 原理

1. 自行计算
元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop)
并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度)

2. 传统的实现方法是,监听到scroll事件后,调用目标元素(绿色方块)的getBoundingClientRect()方法。

3. IntersectionObserver 观察是否可见

vue-lazyload设计简析

首先最明显的是需要一个检查图片dom元素是否在浏览器可视区域内的方法checkInView,然后需要给所有图片的滚动父元素绑定一个滚动事件的监听方法scrollHandler