骨架屏通过展示页面结构的灰色占位图提升加载体验，使用 html+css 构建占位结构并配合javaScript 在数据加载完成后切换为真实内容，保持布局一致性和动画反馈可优化效果，适用于慢网速或复杂页面场景。
网页加载时出现白屏会让用户感觉卡顿或页面出错，使用骨架屏（Skeleton Screen）能有效提升用户体验。它通过在内容加载前展示页面结构的灰色占位图，让用户感知到页面正在加载且结构清晰。以下是 html5 中实现骨架屏的基本方法和优化建议。
什么是骨架屏
骨架屏是一种 ui 设计模式，在数据未完全加载前，先用简单图形和色块模拟页面布局，比如用灰色矩形代表标题、图片、段落等。相比传统的 loading 图标，它更贴近最终页面形态，减少视觉跳跃感。
使用纯 HTML+CSS 创建骨架结构
可以通过添加一个“骨架”版本的 dom 结构，配合 CSS 样式来实现。当页面数据未就绪时显示骨架，数据加载完成后替换为真实内容。
示例代码：
HTML 结构：
立即学习 “ 前端免费学习笔记（深入）”；
<div class="content"> <!-- 骨架屏 --> <div class="skeleton" id="skeleton"> <div class="skeleton-header"></div> <div class="skeleton-avatar"></div> <div class="skeleton-title"></div> <div class="skeleton-paragraph"></div> </div> <p><!-- 真实内容（默认隐藏）--> <div class="actual-content" id="content" style="display:none;"> <h1> 文章标题 </h1> <img src="avatar.jpg" alt=" 头像 "> <p> 这里是正文内容……</p> </div> </div></p>CSS 样式：
.skeleton-header {height: 20px; background: #eee; margin-bottom: 10px;} .skeleton-avatar {width: 50px; height: 50px; background: #eee; border-radius: 50%;} .skeleton-title {width: 80%; height: 24px; background: #eee; margin: 10px 0;} .skeleton-paragraph {width: 100%; height: 16px; background: #eee; margin-bottom: 8px;} <p>/<em> 添加动画效果，模拟“呼吸”感 </em>/ @keyframes shimmer {0% { background-position: -200px;} 100% {background-position: 200px;} } .skeleton div {animation: shimmer 1.5s infinite linear; background-image: linear-gradient(90deg, #f0f0f0, #e0e0e0, #f0f0f0); background-size: 400px; }</p>结合 javascript 控制显示与隐藏
// 模拟数据加载 setTimeout(() => { document.getElementById('skeleton').style.display = 'none'; document.getElementById('content').style.display = 'block'; }, 2000); // 假设加载耗时 2 秒实际项目中可结合 fetch、axios等请求 接口 后操作 DOM 切换。
优化建议
- 保持骨架结构与真实页面布局一致，避免加载后跳变
- 使用 CSS 动画增强“加载中”的视觉反馈
- 若使用 前端 框架（如vue/react），可用专门的骨架组件（如 Vue Skeleton Loader）动态控制
- 服务端渲染（SSR）时可在初始 HTML 中直接输出骨架结构，加快首屏呈现
- 注意不要让骨架屏停留过久，应设置超时机制防止假死
基本上就这些。骨架屏虽小，但对用户体验提升明显，尤其在网络较慢或内容复杂的页面中非常实用。实现方式不复杂，关键是结构合理、过渡自然。
