首页

外观

智能助手

移动端骨架屏实现

约 1979 字大约 7 分钟

2025-02-12

移动端 H5 首页骨架屏方案

在移动端 H5 页面中，首页加载速度对用户体验至关重要。为了提升用户体验，骨架屏（Skeleton Screen） 是一种常见的优化手段。骨架屏在页面内容加载完成前，先展示页面的基本结构和布局，给用户一种页面正在加载的视觉反馈，从而减少用户等待的焦虑感。

本文将详细介绍移动端 H5 首页骨架屏的实现方案，包括设计思路、技术实现和优化建议。

1. 什么是骨架屏？

骨架屏是一种页面加载优化技术，它通过展示页面的基本布局结构（如占位图、线条等），在页面内容加载完成前给用户提供视觉反馈。骨架屏的核心作用是：

提升用户体验：减少用户等待的焦虑感。

提高感知速度：让用户感觉页面加载更快。

2. 骨架屏的设计原则

在设计骨架屏时，需要遵循以下原则：

简洁明了：展示页面的基本布局，避免过多细节。

与真实内容一致：骨架屏的结构应与实际内容布局一致，避免用户产生困惑。

动画效果：可以添加轻微的动画效果（如闪烁或渐变），增强加载感。

3. 骨架屏的实现方案

3.1 方案一：静态骨架屏

静态骨架屏是通过 HTML 和 CSS 实现的简单占位结构。

实现步骤：

  • 在 HTML 中定义骨架屏的结构。

  • 使用 CSS 设置骨架屏的样式。

  • 在页面加载完成后，隐藏骨架屏并显示真实内容。

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Skeleton Screen</title>
    <style>
      .skeleton {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
      }
      .skeleton-item {
        background: #e0e0e0;
        border-radius: 4px;
        animation: shimmer 1.5s infinite;
      }
      .skeleton-header {
        height: 40px;
        width: 100%;
      }
      .skeleton-content {
        height: 100px;
        width: 100%;
      }
      @keyframes shimmer {
        0% {
          opacity: 0.5;
        }
        50% {
          opacity: 1;
        }
        100% {
          opacity: 0.5;
        }
      }
    </style>
  </head>
  <body>
    <div id="skeleton" class="skeleton">
      <div class="skeleton-item skeleton-header"></div>
      <div class="skeleton-item skeleton-content"></div>
    </div>
    <div id="content" style="display: none;">
      <h1>真实内容</h1>
      <p>页面加载完成！</p>
    </div>

    <script>
      // 模拟页面加载
      setTimeout(() => {
        document.getElementById("skeleton").style.display = "none";
        document.getElementById("content").style.display = "block";
      }, 2000); // 2秒后显示真实内容
    </script>
  </body>
</html>

运行 HTML 优点：

  • 实现简单，适合小型项目。

  • 无需额外依赖。

缺点：

  • 需要手动维护 HTML 和 CSS 结构。

  • 无法动态生成骨架屏。

3.2 方案二：动态骨架屏

动态骨架屏是通过 JavaScript 动态生成骨架屏结构，适合复杂页面。

实现步骤：

  • 使用 JavaScript 动态生成骨架屏的 HTML 结构。

  • 在页面加载完成后，隐藏骨架屏并显示真实内容。

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamic Skeleton Screen</title>
    <style>
      .skeleton {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
      }
      .skeleton-item {
        background: #e0e0e0;
        border-radius: 4px;
        animation: shimmer 1.5s infinite;
      }
      @keyframes shimmer {
        0% {
          opacity: 0.5;
        }
        50% {
          opacity: 1;
        }
        100% {
          opacity: 0.5;
        }
      }
    </style>
  </head>
  <body>
    <div id="skeleton"></div>
    <div id="content" style="display: none;">
      <h1>真实内容</h1>
      <p>页面加载完成！</p>
    </div>

    <script>
      // 动态生成骨架屏
      const skeleton = document.getElementById("skeleton");
      skeleton.innerHTML = `
      <div class="skeleton">
        <div class="skeleton-item" style="height: 40px; width: 100%;"></div>
        <div class="skeleton-item" style="height: 100px; width: 100%;"></div>
      </div>
    `;

      // 模拟页面加载
      setTimeout(() => {
        skeleton.style.display = "none";
        document.getElementById("content").style.display = "block";
      }, 2000); // 2秒后显示真实内容
    </script>
  </body>
</html>

运行 HTML 优点：

  • 灵活性高，适合复杂页面。

  • 可以根据数据动态生成骨架屏。

缺点：

  • 实现复杂度较高。

3.3 方案三：使用第三方库

可以使用现成的骨架屏库（如 react-content-loader 或 vue-skeleton-webpack-plugin），快速实现骨架屏。

示例（React + react-content-loader）：

import React from "react";
import ContentLoader from "react-content-loader";

const Skeleton = () => (
  <ContentLoader
    speed={2}
    width={400}
    height={160}
    viewBox="0 0 400 160"
    backgroundColor="#f3f3f3"
    foregroundColor="#ecebeb"
  >
    <rect x="0" y="0" rx="3" ry="3" width="400" height="40" />
    <rect x="0" y="60" rx="3" ry="3" width="400" height="100" />
  </ContentLoader>
);

export default Skeleton;

优点：

  • 快速实现，减少开发成本。

  • 提供丰富的动画效果和样式。

缺点：

需要引入额外的依赖。

  1. 优化建议

  • 与懒加载结合：在图片或组件懒加载时，使用骨架屏作为占位符。

  • 适配不同设备：使用响应式设计，确保骨架屏在不同设备上显示正常。

  • 减少 DOM 操作：动态生成骨架屏时，尽量减少 DOM 操作，避免性能问题。

  • 动画效果：添加轻微的动画效果（如渐变或闪烁），增强加载感。

  1. 总结 骨架屏是提升移动端 H5 首页加载体验的有效手段。通过静态骨架屏、动态骨架屏或第三方库，可以快速实现骨架屏效果。在实际项目中，可以根据需求选择合适的方案，并结合懒加载、响应式设计等技术，进一步提升用户体验。

4. vue-skeleton-webpack-plugin

vue-skeleton-webpack-plugin 是一个用于 Vue 项目的 Webpack 插件，它可以帮助你自动生成骨架屏，并将骨架屏作为页面的加载占位符。这个插件特别适合在 Vue 项目中快速实现骨架屏效果。

下面将详细介绍如何使用 vue-skeleton-webpack-plugin，包括安装、配置和实际示例。

1. 安装插件

首先，你需要安装 vue-skeleton-webpack-plugin 和它的依赖：


npm install vue-skeleton-webpack-plugin --save-dev

2. 创建骨架屏组件

在项目中创建一个骨架屏组件，例如 src/components/Skeleton.vue：

<template>
  <div class="skeleton">
    <div class="skeleton-header"></div>
    <div class="skeleton-content"></div>
  </div>
</template>

<script>
export default {
  name: "Skeleton",
};
</script>

<style scoped>
.skeleton {
  padding: 16px;
}

.skeleton-header {
  height: 40px;
  background: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 16px;
}

.skeleton-content {
  height: 200px;
  background: #e0e0e0;
  border-radius: 4px;
}
</style>

3. 配置 Webpack 插件

在 vue.config.js 中配置 vue-skeleton-webpack-plugin：

const SkeletonWebpackPlugin = require("vue-skeleton-webpack-plugin");

module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: path.resolve(__dirname, "./src/components/Skeleton.vue"),
          },
        },
        minimize: true,
        quiet: true,
        router: {
          mode: "hash",
          routes: [
            {
              path: "/", // 首页路由
              skeletonId: "skeleton", // 骨架屏的 ID
            },
          ],
        },
      }),
    ],
  },
};

4. 在页面中使用骨架屏

在页面组件中，使用 skeletonId 指定骨架屏的占位符。例如，在 src/views/Home.vue 中：

<template>
  <div>
    <div v-if="loading" id="skeleton"></div>
    <div v-else>
      <h1>首页内容</h1>
      <p>页面加载完成！</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
    };
  },
  mounted() {
    // 模拟数据加载
    setTimeout(() => {
      this.loading = false;
    }, 2000);
  },
};
</script>

5. 运行项目

运行项目后，访问首页时，会先显示骨架屏，2 秒后显示真实内容：


npm run serve

6. 配置详解

6.1 webpackConfig

用于指定骨架屏组件的入口文件。

例如：


webpackConfig: {
  entry: {
    app: path.resolve(__dirname, './src/components/Skeleton.vue'),
  },
},
6.2 minimize

是否压缩生成的骨架屏代码。

默认值为 true。

6.3 quiet

是否静默模式（不输出日志）。

默认值为 true。

6.4 router

配置路由和骨架屏的映射关系。

例如：


router: {
  mode: 'hash', // 路由模式
  routes: [
    {
      path: '/', // 路由路径
      skeletonId: 'skeleton', // 骨架屏的 ID
    },
  ],
},

7. 高级用法

7.1 多页面骨架屏

如果你的项目是多页面应用，可以为每个页面配置不同的骨架屏：

new SkeletonWebpackPlugin({
  webpackConfig: {
    entry: {
      app: path.resolve(__dirname, "./src/components/Skeleton.vue"),
      about: path.resolve(__dirname, "./src/components/AboutSkeleton.vue"),
    },
  },
  router: {
    mode: "hash",
    routes: [
      {
        path: "/",
        skeletonId: "skeleton",
      },
      {
        path: "/about",
        skeletonId: "about-skeleton",
      },
    ],
  },
});
7.2 自定义样式

可以通过 CSS 自定义骨架屏的样式。例如，在 Skeleton.vue 中添加动画效果：

@keyframes shimmer {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

.skeleton-header,
.skeleton-content {
  animation: shimmer 1.5s infinite;
}

8. 总结

vue-skeleton-webpack-plugin 是一个强大的工具，可以帮助你在 Vue 项目中快速实现骨架屏效果。通过简单的配置，你可以为不同页面生成不同的骨架屏，并提升用户体验。

核心步骤：

  • 安装插件。

  • 创建骨架屏组件。

  • 配置 Webpack 插件。

  • 在页面中使用骨架屏。

参考资料

版权归属：tuyongtao1

许可证：署名 4.0 国际 (CC-BY-4.0)

© 2024 图图 📧 email