懒加载

Lazy Loading

交互模式也叫：延迟加载、按需加载、Lazy Load

一句话：图片、组件等资源先不加载，等用户快滚动到它或真正需要时才加载，用来加快首屏速度。

详细解释

一个页面有几十张图片时，如果一打开就全部下载，首屏会很慢。懒加载的做法是：先放一个占位（灰色块或模糊小图），等图片快进入视口时才真正请求。最简单的写法是给图片加 loading="lazy"，浏览器会自动处理。

懒加载不只用于图片，也可以用于组件和代码：弹窗、图表库、富文本编辑器这类体积大的模块，等用户真正打开时再加载对应的 JS，这通常叫「按需加载」或「代码分割」。

注意和无限滚动区分：懒加载是页面里已经确定要显示的内容延后加载资源，无限滚动是不断追加新数据。占位块要提前定好宽高，否则图片加载出来会把下面的内容挤下去，页面发生跳动。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

文章列表里的封面图请做懒加载：图片进入视口前先显示同尺寸的浅灰色占位块，快滚动到时再加载真实图片，加载完成后淡入显示；占位块固定 16:9 比例，避免图片加载后页面跳动。