COMPONENT 76 · Motion & Interaction

延迟加载

Lazy Loading

也叫Deferred LoadingOn-demand Loading懒加载

仅在内容接近视口或真正需要时加载资源。

Loads resources only when they approach the viewport or are actually needed.

ANATOMY & USAGE

结构与使用建议

组成部分

占位区域
观察触发点
真实内容

适合使用

页面包含大量首屏外图片或昂贵内容时。

不建议使用

延迟会阻碍首屏关键内容、搜索索引或必要交互时。

键盘与无障碍

为图片保留尺寸与替代文本，提供加载/错误状态，不能让键盘用户跳过未加载内容。

DESCRIBE IT TO AI

这样告诉编程助手

实现延迟加载（Lazy Loading）：仅在内容接近视口或真正需要时加载资源。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<section class="demo stack">
  <p>继续滚动时，浏览器才加载下面的图片。</p>
  <img loading="lazy" width="320" height="180" alt="蓝色渐变示例图"
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==">
</section>