滚动页面,当某张图进入视口(并满足预加载边距)后才会发起网络请求;未加载完成前会看到玫瑰线动画占位。
JSX:显式使用 LazyImage
下面两张使用
picsum.photos 占位图,便于观察懒加载与占位效果。Markdown 图片语法
标准
 在站点里同样会走 LazyImage 渲染(见 lib/mdx-components.tsx 中的 img 映射)。本地
public 资源也会按需进入视口后再加载。