HTML怎么做骨架屏卡片_html卡片骨架屏加载效果实现【超详细】

陆砚码

2026-10-28 • 👁 0人浏览过

骨架屏是用灰色块模拟真实卡片布局结构的占位方案，非动效图标；它通过静态HTML+CSS直出、严格对齐样式与尺寸、三态逻辑控制显隐，提升首屏可预期性与渲染稳定性。什么是骨架屏，为什么不用 loading 图标骨架屏不是动效加载图标，而是用灰色块模拟真实卡片的布局结构，在数据还没回来时先占位。用户能立刻感知页面结构，比转圈图标更可预期；首屏渲染快、不闪跳，尤其适合 SSR 或 React/Vue 的服务端渲染场景。骨架屏本质是静态 HTML + CSS，不依赖 JS 渲染，所以首屏直出快不要等

fetch

完再插入骨架——它得和容器一起 HTML 直出，或用

display: none

切换显隐真实卡片有圆角、阴影、图片宽高比？骨架屏必须严格对齐，否则加载后会“跳” 纯 HTML + CSS 实现骨架卡片（无 JS）核心思路：用

模拟标题、段落、头像、图片区域，靠

background

linear-gradient

做灰色渐变动画。

对应 CSS 要点：所有骨架元素设

background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)

加

background-size: 200% 100%

和

animation: loading 1.5s infinite

让灰条流动

.skeleton-avatar

用

border-radius: 50%

，

.skeleton-title

设固定高度（如

height: 20px

），避免重排注意：别用

width: 100%

填满父容器——真实卡片往往有

max-width

或

padding

，骨架也得一致，否则加载后宽度突变。立即学习 “ 前端免费学习笔记（深入） ”； Vue/React 中控制骨架显隐的边界条件骨架屏不是“加载中就显示”，而是在「数据未就绪且尚未报错」时才显示。常见错误逻辑：使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载错误：用

v-if="loading"

控制骨架 → 一旦

loading = false

就立刻切真实内容，但此时

data

可能还是空正确：用三态判断：

isLoading && !data

显示骨架，

!isLoading && data

显示内容，

!isLoading && error

显示错误在 Vue 中推荐这样写：

React 同理，别只依赖

useState({ loading: true })

，要拆开管理

data

、

loading

、

error

三个状态。响应式骨架卡片容易被忽略的坑 PC 卡片横排三列，移动端变成单列？骨架屏也得响应式，但不能只靠

@media

改

width

。图片区域的宽高比必须保持一致：PC 用

aspect-ratio: 16/9

，移动端改

aspect-ratio: 4/3

会导致骨架和真实图比例不一致，加载后“缩一下” 更稳妥的做法：让骨架卡片容器和真实卡片共用同一套 CSS 类（比如都用

.card

），仅通过子元素 class 区分内容/骨架，避免样式割裂如果用了 CSS-in-JS（如 Emotion），确保骨架组件的 className 不被 hash 冲突，否则媒体查询失效真实项目里最常出问题的是：开发时只看桌面端，上线后发现 SkeletonCard 在 iPhone 上高度塌陷——因为忘了给

.skeleton-img

设置

min-height

或

aspect-ratio

fallback。骨架屏不是炫技，是细节堆出来的体验。最麻烦的永远不是怎么画灰块，而是让它和真实卡片在所有尺寸、所有状态、所有加载时机下，严丝合缝地对齐。

相关文章