用途
Load More 用于在用户主动请求时动态加载额外内容，而不是在页面初始加载时一次性载入全部内容。该模式可以缩短初始页面加载时间，并在用户需要时提供对更多内容的无缝访问。
何时使用
当用户应当按自己的节奏渐进探索内容、而不被一次性大量内容淹没时，使用 Load More。与无限滚动不同，Load More 给予用户明确的控制权，让用户有意识地决定何时查看更多条目。
为提升可用性，请确保在所有内容加载完毕后移除 Load More 按钮，或将其更新为提示没有更多条目（例如“No More Results”）。
常见场景包括：
- 大型内容列表需要分页（新闻流、商品列表）
- 通过初始只加载部分数据来改善页面性能
- 用户渐进浏览，而非一次性需要全部内容
- 需要一种比无限滚动更具用户控制力的替代方案
何时避免
- 完整内容列表足够小，可以一次性加载且无性能问题
- 用户需要同时比较多个条目（此时分页更合适）
- 需要实时更新或持续数据流
实现流程
- 在复制示例前，先确认该模式与问题和约束条件相匹配。
- 从 references/pattern.md 中的结构与示例入手，然后选择最小可行的变体。
- 在叠加视觉打磨之前，先应用无障碍、性能和交互方面的护栏。
- 使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍护栏
ARIA 属性
必需的 ARIA 属性：
- 使用 aria-controls 将 Load More 按钮与正在更新的内容关联起来。
- 使用 aria-live="polite" 播报加载状态。
- 如果按钮在加载全部内容后被移除，更新其 aria-label 以表明没有更多内容可用。
屏幕阅读器支持
实现注意事项：
- 应在新增内容时告知用户。
- 确保新条目出现时具有正确的 Tab 焦点顺序。
- 使用可访问的按钮元素（<button> 而非 <div> 或 <span>）。
性能护栏
目标指标：
- 初始按钮渲染：页面加载后 < 50ms
- 加载状态反馈：点击后 < 100ms（即时视觉响应）
- 内容获取时间：典型批次（10-20 个条目）为 200-500ms
- 获取后的 DOM 更新：< 100ms 以实现平滑插入
- 新内容可见的总时间：理想 < 600ms，可接受 < 1000ms
内存注意事项：
- 每批条目数：10-20 个为最佳（在请求与内存之间取得平衡）
- DOM 节点：监控总数，超过 100 个条目后考虑虚拟化
- 图片懒加载：仅在接近视口时加载图片
常见错误
没有视觉反馈
问题：如果点击后没有立即发生任何变化，用户会认为按钮坏了。
修复方法：添加加载指示器或加载动画，并考虑在新内容完全加载前禁用按钮。
一次加载过多条目
问题：大批量内容会拖慢性能、导致布局偏移，并让用户不堪重负。
修复方法：加载更小的块（每次点击 10–20 个条目）。使用增量更新，而非一次性大量数据获取。
强制用户过多点击 Load More
问题：反复点击 Load More 会让用户感到沮丧，并使页面显得无响应。
修复方法：在几次手动加载后尝试滚动自动加载，或在检测到高参与度时增大批次大小。
相关模式
- https://uxpatterns.dev/patterns/content-management/accordion
- https://uxpatterns.dev/patterns/forms/button
- https://uxpatterns.dev/patterns/navigation/infinite-scroll
- https://uxpatterns.dev/patterns/navigation/pagination
完整实现细节、示例和测试说明，请参见 references/pattern.md。
模式页面：https://uxpatterns.dev/patterns/navigation/load-more