图片懒加载示例

2026-04-08

演示在 MDX 中使用 LazyImage:进入视口再请求图片,加载过程由 Spin + RoseCurveLoading 占位。

  • MDX
  • LazyImage
滚动页面,当某张图进入视口(并满足预加载边距)后才会发起网络请求;未加载完成前会看到玫瑰线动画占位。

JSX:显式使用 LazyImage

下面两张使用 picsum.photos 占位图,便于观察懒加载与占位效果。

Markdown 图片语法

标准 ![说明](地址) 在站点里同样会走 LazyImage 渲染(见 lib/mdx-components.tsx 中的 img 映射)。
本地 public 资源也会按需进入视口后再加载。