骨架屏是通过css实现的加载过渡效果，核心在于使用html结构与css动画模拟内容轮廓并提升用户体验。具体步骤包括：1. 使用html搭建无内容的页面结构；2. 通过css设置浅灰色背景与动画实现动态闪烁效果；3. 利用border-radius或clip-path控制骨架屏形状；4. 数据加载完成后通过JavaScript移除骨架屏；5. 优化性能时避免复杂形状、使用css动画并减少重绘重排；6. 可根据网络环境动态调整骨架屏复杂程度；7. 骨架屏区别于loading动画，其优势在于提供内容预期而非单纯提示加载。
骨架屏，说白了，就是在数据加载前，先用一些简单的形状“占个坑”，给用户一个“正在加载”的心理预期，避免长时间白屏带来的焦虑。CSS 就能搞定这件事，而且效果还不错。
CSS实现骨架屏，其实就是利用CSS的背景和动画效果。
解决方案
-
基础结构： 先用HTML搭建一个简单的页面结构，比如文章标题、段落等。这些结构不需要真实的内容，只需要确定它们的位置和大小。
立即学习“前端免费学习笔记（深入）”；
-
CSS样式： 关键在于CSS。给这些结构添加背景色，通常是浅灰色，模拟内容未加载时的状态。
-
动画效果： 通过CSS动画，让这些浅灰色的背景色产生一种闪烁或渐变的效果，模拟数据加载的动态过程。
一个简单的例子：
<div class="skeleton-wrapper"> <div class="skeleton-title"></div> <div class="skeleton-paragraph"></div> <div class="skeleton-image"></div> </div>
.skeleton-wrapper { width: 80%; margin: 20px auto; } .skeleton-title { width: 60%; height: 30px; background-color: #eee; margin-bottom: 10px; border-radius: 5px; animation: skeleton-loading 1.5s linear infinite; } .skeleton-paragraph { width: 90%; height: 15px; background-color: #eee; margin-bottom: 5px; border-radius: 3px; animation: skeleton-loading 1.5s linear infinite; } .skeleton-image { width: 100%; height: 200px; background-color: #eee; border-radius: 10px; animation: skeleton-loading 1.5s linear infinite; } @keyframes skeleton-loading { 0% { background-color: #eee; } 50% { background-color: #ddd; } 100% { background-color: #eee; } }
这段代码创建了一个简单的骨架屏，包含一个标题、一段文字和一个图片。关键是skeleton-loading这个动画，它让背景色在浅灰色之间循环变化，产生闪烁的效果。
如何更精细地控制骨架屏的形状？
骨架屏不一定要是矩形。你可以使用border-radius来创建圆角，甚至使用clip-path来创建更复杂的形状。例如，想要一个圆形头像的骨架屏，可以这样：
.skeleton-avatar { width: 50px; height: 50px; border-radius: 50%; /* 圆形的关键 */ background-color: #eee; animation: skeleton-loading 1.5s linear infinite; }
clip-path则更强大，可以创建任意形状。但要注意兼容性，一些老版本的浏览器可能不支持。
如何在数据加载完成后移除骨架屏？
这需要在JavaScript的配合下完成。当数据加载完成后，移除骨架屏的类名，或者直接移除骨架屏的html元素。一个简单的例子：
// 假设 dataLoaded 是一个布尔值，表示数据是否加载完成 if (dataLoaded) { const skeletonWrapper = document.querySelector('.skeleton-wrapper'); skeletonWrapper.classList.add('hidden'); // 或者直接 skeletonWrapper.remove(); }
.skeleton-wrapper.hidden { display: none; }
当dataLoaded为true时，给.skeleton-wrapper添加一个hidden类，将其隐藏。当然，更彻底的做法是直接移除骨架屏的HTML元素。
如何优化骨架屏的性能？
骨架屏本身不应该成为性能瓶颈。
- 避免过度复杂的形状： 复杂的clip-path或过多的元素会增加渲染负担。
- 使用CSS动画： CSS动画通常比JavaScript动画更高效。
- 减少重绘和重排： 尽量避免触发重绘和重排的操作。
如何针对不同的网络环境使用不同的骨架屏？
可以根据网络速度，显示不同复杂程度的骨架屏。比如，在弱网环境下，显示更简单的骨架屏，减少加载时间。这需要在JavaScript中检测网络速度，并根据结果动态调整骨架屏的样式。这有点复杂，但如果你的应用对用户体验要求很高，可以考虑这样做。
骨架屏和loading动画有什么区别？
骨架屏提供的是内容的大致轮廓，而loading动画通常是一个独立的、居中的动画元素，表示正在加载。骨架屏更注重用户体验，让用户对即将加载的内容有一个大致的预期，而loading动画则更简单直接。两者可以同时使用，但通常情况下，骨架屏的效果更好。
