懒加载
Lazy Loading
别名:懒加载按需加载延迟加载滚动到才加载图片懒加载进入视口加载
这是什么
用"推迟加载"的方式处理暂不在视口内的资源：图片、列表分块、组件等在接近或进入可视区域时才真正请求和渲染。 首屏只承担可见部分的开销，配合占位骨架避免突然撑开布局，让长页面既快又稳。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 页面含大量图片或长列表，首屏之外的资源较多
- 首屏加载速度是关键指标，需要削减初始请求
- 部分内容用户大概率不会滚动看到
✕ 不适用场景
- 资源就在首屏内，懒加载反而引入延迟
- 打印、SEO 或无 JS 环境必须能拿到全部内容
- 资源极小且数量有限，切分收益低于复杂度成本
常见形式
原生懒加载
Native
img loading="lazy" 一行搞定，交给浏览器
视口侦测
IntersectionObserver
进入视口再挂载并淡入，可控性更强
占位渐进
Placeholder
模糊缩略图或纯色块先行，加载后替换
实现要点
loading: lazyIntersectionObserveropacitytransform图片优先用原生 loading="lazy"；需要自定义时机或动画时用 IntersectionObserver 监听占位元素， 命中后设置真实 src 或挂载组件，配 opacity/translate 过渡淡入。占位需预留宽高（aspect-ratio）避免布局跳动。 尊重 prefers-reduced-motion，淡入退化为直接显示。
相关概念
用"滚动到底自动追加下一页"取代传统分页：用户持续下滑，新内容不断出现， 底部以加载指示或哨兵元素衔接。它解决的是浏览节奏被打断的问题—— 用户不必寻找"下一页"按钮，注意力始终停留在内容流上，长列表被拆成一次次无感的追加。
交互模式相似概念用与真实内容结构一致的灰色占位块表示加载状态，通常带轻微的微光扫过或呼吸动画。 它告诉用户"内容马上就位，结构长这样"，而不是让用户盯着空白或转圈等待。
交互模式相似概念把信息分层呈现：先给最常用、最必要的部分，把次要细节藏到"展开""下一步""显示更多"后面， 用户主动索取时才展示。它解决的是一次性塞给用户太多内容的问题—— 降低初始认知负担，让界面入门简单，同时保留深度供高级用户按需取用。
交互模式相似概念当列表或页面没有数据时，不留一片空白，而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点：首次使用教用户开始，搜索无结果给出路。
交互模式相似概念用带页码的控件把长结果集切分为离散页面：用户显式点击页码或上一页 / 下一页 按钮取回对应片段，当前位置永远可知、可分享、可回退。与无限滚动的"失控 漂移"相对，它是数据浏览中最可控的方式，也是搜索结果与后台表格的默认选择。
组件搭配使用