前端骨架屏
1
1
1
1
实现步骤
1. 设计骨架屏的 HTML 结构和 CSS 样式
创建与实际内容结构相似的骨架屏 HTML 元素，并使用 CSS 样式进行渲染。
html
<div id="skeleton-container">
<div class="skeleton skeleton-rect"></div>
<div class="skeleton skeleton-text" style="width: 80%;"></div>
<div class="skeleton skeleton-text" style="width: 60%;"></div>
<div class="skeleton skeleton-text" style="width: 90%;"></div>
</div>
<div id="content-container" style="display: none;">
<!-- 这里是实际内容 -->
</div>css
.skeleton {
background-color: #e0e0e0;
border-radius: 4px;
width: 100%;
height: 100%;
animation: shimmer 1.5s infinite linear;
background: linear-gradient(to right, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
background-size: 800px 104px;
}
@keyframes shimmer {
0% {
background-position: -800px 0;
}
100% {
background-position: 800px 0;
}
}
.skeleton-text {
height: 16px;
margin-bottom: 8px;
}
.skeleton-rect {
height: 200px;
margin-bottom: 16px;
}2. 使用 JavaScript 控制骨架屏的显示与隐藏
使用 JavaScript 来控制骨架屏的显示与隐藏。以下是一个简单的示例，模拟 3 秒的数据加载时间。
js
// 模拟数据加载
setTimeout(() => {
document.getElementById('skeleton-container').style.display = 'none'
document.getElementById('content-container').style.display = 'block'
}, 3000) // 3秒后显示实际内容3. 在框架中实现（以 React 为例）
在 React 中实现骨架屏，可以创建一个骨架屏组件，并在数据加载时进行切换。
jsx
import React, { useState, useEffect } from 'react'
import './Skeleton.css' // 骨架屏的CSS样式
const Skeleton = () => (
<div className="skeleton-container">
<div className="skeleton skeleton-rect"></div>
<div className="skeleton skeleton-text" style={{ width: '80%' }}></div>
<div className="skeleton skeleton-text" style={{ width: '60%' }}></div>
<div className="skeleton skeleton-text" style={{ width: '90%' }}></div>
</div>
)
const DataComponent = () => (
<div>
<div className="content-rect">Actual content rectangle</div>
<div className="content-text">Actual content line 1</div>
<div className="content-text">Actual content line 2</div>
<div className="content-text">Actual content line 3</div>
</div>
)
const App = () => {
const [loading, setLoading] = useState(true)
useEffect(() => {
// 模拟数据加载
setTimeout(() => {
setLoading(false)
}, 3000) // 3秒后加载数据
}, [])
return <div>{loading ? <Skeleton /> : <DataComponent />}</div>
}
export default App骨架屏的优势
1. 提升用户体验
骨架屏让用户在等待数据加载时感觉更快，减少了用户感知到的等待时间。
2. 更好的视觉反馈
相比于加载指示器（如加载旋转图标），骨架屏提供了与实际内容布局相似的视觉反馈，使用户更容易预期内容的布局和结构。
3. 降低跳动感
骨架屏可以减少内容加载过程中布局跳动的问题，提高用户体验的平滑度。