短视频app开发源码，骨架屏技术优化前端体验

云豹科技-苏凌霄 / 2024-12-29 / 原文

一、什么是骨架屏？

骨架屏是一种在短视频app开发源码页面加载过程中，以占位符形式展示页面结构的技术。它通过显示简单的灰色块和线条，让用户在等待内容加载时获得视觉反馈，提高了用户的满意度。

二、为什么需要骨架屏？

在移动设备和慢速网络环境下，短视频app开发源码的页面加载速度变得尤为关键。用户不愿等待长时间才能看到页面内容。骨架屏能够在内容加载完全之前快速展示页面结构，让用户感受到页面加载的进度，从而提高了用户体验。

三、使用纯 CSS 实现骨架屏

实现骨架屏的方法有很多，可以使用纯CSS，也可以使用SVG，甚至还可以利用一些前端库。下面我们以一个简单的纯CSS实现为例。

1、实现简单的html骨架页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skeleton Example</title>
</head>
<body>
 <div class="skeleton">
  <div class="skeleton-header"></div>
  <div class="skeleton-body">
    <div class="skeleton-line"></div>
    <div class="skeleton-line"></div>
    <div class="skeleton-line"></div>
  </div>
</div>
</body>
</html>

2、实现骨架屏样式

/* skeleton.css */
.skeleton {
  width: 300px;
  padding: 20px;
  background-color: #f6f7f8;
}
.skeleton-header {
  width: 100%;
  height: 200px;
  background-color: #e0e0e0;
}
.skeleton-body .skeleton-line {
  width: 100%;
  height: 20px;
  margin-top: 20px;
  background-color: #e0e0e0;
}

实现效果如图，骨架屏虽然简单，但要做得好，还可以进一步优化。

在这里插入图片描述

3、骨架屏优化

/* CSS */
@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

.skeleton-header, .skeleton-body .skeleton-line {
  animation-duration: 1.25s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  position: relative;
}

在这里插入图片描述

以上代码为骨架屏添加了一个流动光影的动画效果，使得骨架屏看起来更有活力。

基于预渲染的骨架屏

基于预渲染的骨架屏技术通过短视频app开发源码服务器端渲染或静态站点生成提前生成页面的骨架，然后在客户端加载时填充内容，从而提高性能和SEO。

使用react-loading-skeleton创建骨架屏

import React from 'react';
import Skeleton from 'react-loading-skeleton';

function UserProfile() {
  return (
    <div>
      <h2>User Profile</h2>
      <div className="user-details">
        <Skeleton height={100} width={100} circle={true} />
        <div className="user-info">
          <Skeleton height={20} width={200} />
          <Skeleton height={20} width={200} />
          <Skeleton height={20} width={200} />
        </div>
      </div>
    </div>
  );
}

export default UserProfile;