数据懒加载

web

scrollTop 定义：获取或设置元素的内容向上滚动的像素值

clientHeight 定义：clientHeight = CSS height + CSS padding + 水平滚动条的高度

scrollHeight 定义：只读属性是一个元素的所含的高度的测定，包括由于溢出内容在屏幕上不可见的。

关系公式：element.scrollHeight - element.scrollTop === element.clientHeight

// 滚动触底
export function useScrollDown(handler) {
  let timer = null;
  // 翻页
  function onScroll(e) {
    if (timer) return;
    timer = setTimeout(() => {
      timer = null;
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      if (scrollHeight - clientHeight - scrollTop < 50) {
        handler && handler();
      }
    }, 200);
  }
  onUnmounted(() => clearTimeout(timer));
  return {
    onScroll,
  };
}

图片懒加载

1. 高版本谷歌在照片节点添加属性 loading=”lazy”
2. 监听图片在视口时，再赋值 src

小程序

通过触底 api onReachBottom

可通过配置触底参数配置触发的条件距离等

IntersectionObserver API(推荐)

传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。scroll 事件的监听回调是同步执行的，这样就会影响 JS 主线程的 UI 渲染。

使用

IntersectionObserver API 使用教程 - 阮一峰的网络日志 (ruanyifeng.com)

注意点

IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。

规格写明，IntersectionObserver的实现，应该采用requestIdleCallback()，即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。