骨架屏实现原理vue
骨架屏实现原理
骨架屏（Skeleton Screen）是一种优化用户体验的技术，在页面内容加载完成前显示一个灰色占位图，模拟页面的大致结构，让用户感知到内容即将加载。在Vue中实现骨架屏的核心原理是通过动态切换占位元素和真实内容。
Vue中实现骨架屏的方法
使用条件渲染
通过v-if或v-show控制骨架屏和真实内容的显示切换。数据加载完成后隐藏骨架屏，显示真实内容。
<template>
<div>
<div v-if="loading" class="skeleton">
<!-- 骨架屏占位元素 -->
</div>
<div v-else>
<!-- 真实内容 -->
</div>
</div>
</template>CSS样式控制
骨架屏通常使用CSS动画实现渐变效果，增强视觉体验。关键是通过background-color和linear-gradient模拟加载状态。
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}第三方库推荐
vue-skeleton-webpack-plugin 该插件通过Webpack在构建时生成骨架屏HTML，直接替换Vue的挂载节点。适用于静态内容较多的页面。
配置示例：
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
module.exports = {
plugins: [
new SkeletonWebpackPlugin({
webpackConfig: { entry: './src/skeleton.js' }
})
]
}vue-content-loader 基于SVG的灵活骨架屏生成库，可自定义占位图形。支持多种预设模板（如Facebook风格）。
使用示例：
<template>
<content-loader>
<rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
<rect x="0" y="20" rx="3" ry="3" width="220" height="10" />
</content-loader>
</template>动态数据适配方案
对于动态内容，可通过计算属性生成匹配数据结构的骨架屏：
computed: {
skeletonItems() {
return Array(this.expectedCount).fill().map((_, i) => ({ id: `sk-${i}` }));
}
}模板中同时遍历真实数据和骨架数据：
<div v-for="item in dataLoaded ? realData : skeletonItems" :key="item.id">
{{ dataLoaded ? item.content : ' ' }}
</div>性能优化建议
- 对路由组件使用异步加载（
() => import('./Component.vue')） - 骨架屏元素应保持简单，避免复杂DOM结构
- 关键内容优先加载，非关键内容延后加载
- 配合Vue的
<Suspense>组件实现更细粒度控制
