前端图片懒加载小tips

背景

1. 业务中经常遇到了， 图片需要懒加载场景，避免性能问题，以及流量消耗。

方案梳理

1. 其实我再业务中一般常见手段是通过 监听 onscroll 事件以及通过getBoundclientreact 来判断距离视口的距离来进行懒加载。
2. 或者是通过这个intersectionObserve 来进行交叉观察，意思就是来判断，你需要监听的元素，是否和当前的可视窗口，有交叉，有肯定是进入到可视区域了，比单纯使用onscroll监听会更优。

const intersectionObserver = new IntersectionObserver((entries) => {
  // 如果 intersectionRatio 为 0，则目标在视野外，
  // 我们不需要做任何事情。
  if (entries[0].intersectionRatio <= 0) return;
  console.log("进入到可视区域了");
});
// 开始监听
intersectionObserver.observe(document.querySelector(".scrollerFooter"));
js

css

1. 由于js本身不可避免的遇到性能问题，以及各种计算，因此还是有一些更加简洁的方法，比如通过content-visibility: auto. 但是虽然这里被设置的元素不会被渲染，但是静态资源依然还是会被加载，因此其实没啥用。
2. loading=lazy <img loading=lazy>`
3. 使用 decoding=async 实现图片的异步解码 -待补充