Lazyload 懒加载

通过 IntersectionObserver 在内容接近视口时渲染，配合占位骨架降低首屏开销。

交互演示 React

亲手试一试，更容易理解。

在当前页面运行 Lazyload 懒加载的交互示例。

交互指南

点击本页的“运行演示”，或在独立窗口中体验示例。也可在 src 下的页面中直接挂载现有演示：

tsx

import Example from "./components/lazyLoad/LazyloadDemo";

export default function ExamplePage() {
  return <Example />;
}

示例图片来自外部站点，网络不可用时不会显示。首次相交后停止观察；离开视口不会卸载内容。