骨架屏玩出花儿：手把手教你打造酷炫加载效果

前端

2022-11-29 17:48:05

骨架屏：优化用户加载体验的渐进式加载技术

什么是骨架屏？

骨架屏是一种渐进式加载技术，它在网站内容加载完毕之前，向用户展示一个简约的占位符。这些占位符的布局和样式与最终加载的内容相同，但填充着颜色。这种方法让页面加载过程更显优雅，营造出内容正在逐步显现的效果。

骨架屏的原理

骨架屏通过以下关键点实现其功能：

渐进式加载： 内容分步加载，随着用户向下滚动页面，逐步填充占位符。
占位符： 与实际内容形状和大小相同的矩形或其他形状，通常采用浅色或中性色。
动画效果： 呼吸效果或进度条动画，增强用户体验，减轻他们的等待焦虑。

骨架屏的优势

骨架屏提供了诸多优势：

减少加载时间： 渐进式加载缩短用户等待时间，提升整体体验。
提升视觉效果： 动画效果吸引用户注意力，让他们参与加载过程。
增强品牌形象： 专业且直观的骨架屏建立一个可靠且可信赖的品牌形象。

使用骨架屏的最佳实践

使用恰当的占位符：

选择与最终内容布局和样式一致的形状和大小。
使用浅色或中性色填充占位符，以与真实内容形成鲜明对比。

优化加载性能：

使用渐进式加载技术分步加载内容。
优化图像和媒体文件以减少加载时间。

增强视觉效果：

添加呼吸效果或加载条动画来提升用户体验。
考虑采用品牌主题色来定制骨架屏的外观。

如何使用骨架屏

在 Vanilla React 中，使用 react-skeleton-loader 库：

import Skeleton from "react-skeleton-loader";

const App = () => {
  return (
    <div>
      <Skeleton />
      <Skeleton count={3} />
      <Skeleton height={200} width={400} />
    </div>
  );
};

export default App;

在 Vue3 中，使用 vue-skeleton-loading 库：

import { createApp } from "vue";
import VueSkeletonLoading from "vue-skeleton-loading";

const app = createApp({
  components: {
    VueSkeletonLoading,
  },
  template: `
    <div>
      <VueSkeletonLoading />
      <VueSkeletonLoading count={3} />
      <VueSkeletonLoading height="200px" width="400px" />
    </div>
  `,
});

app.mount("#app");