当前位置：首页 > VUE

骨架屏实现原理vue

2026-02-21 11:58:42VUE

骨架屏实现原理

骨架屏（Skeleton Screen）是一种优化用户体验的技术，在页面内容加载完成前显示占位图，避免白屏或闪烁问题。在Vue中，骨架屏通常通过以下方式实现。

基于CSS的骨架屏

通过CSS模拟内容区域的占位样式，利用动画效果增强视觉体验。关键点包括：

骨架屏实现原理vue

使用background-color和linear-gradient创建灰色占位块。
通过animation实现闪烁动画，模拟加载状态。

.skeleton-item {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}

基于Vue组件的动态渲染

在Vue中，可以封装可复用的骨架屏组件，根据实际内容结构动态渲染占位元素。

<template>
  <div class="skeleton-container">
    <div v-for="i in count" :key="i" class="skeleton-item"></div>
  </div>
</template>

<script>
export default {
  props: {
    count: { type: Number, default: 3 }
  }
}
</script>

结合路由切换

在Vue Router中，可以通过导航守卫控制骨架屏的显示与隐藏。

骨架屏实现原理vue

router.beforeEach((to, from, next) => {
  store.commit('setLoading', true);
  next();
});

router.afterEach(() => {
  setTimeout(() => store.commit('setLoading', false), 500);
});

服务端渲染（SSR）支持

对于Nuxt.js等SSR框架，骨架屏可以直接写入HTML模板，确保首屏快速呈现。

<!-- nuxt.config.js -->
head: {
  script: [
    { hid: 'skeleton', innerHTML: '<div id="skeleton">...</div>' }
  ]
}

自动化生成工具

使用插件如vue-skeleton-webpack-plugin，自动将骨架屏组件注入到HTML中。

// vue.config.js
const SkeletonPlugin = require('vue-skeleton-webpack-plugin');
module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        webpackConfig: { entry: './src/skeleton.js' }
      })
    ]
  }
}