前端骨架怎样实现

news2025/2/18 12:45:21

前端骨架屏（Skeleton Screen）是一种优化页面加载体验的技术，通常在内容加载时展示一个简易的占位符，避免用户看到空白页面。骨架屏通过展示页面结构的骨架样式，让用户有页面正在加载的感觉，而不是等待内容加载完毕。常见的骨架屏实现方式有两种：使用 CSS 动画和使用 JavaScript 组件。

基本实现步骤：

设计骨架结构
骨架屏的结构应该根据你页面的内容来设计，常见的有文本框、头像、图片等元素。可以使用灰色或浅色背景来模拟真实内容的占位。
使用 CSS 实现动画效果
使用 @keyframes 来创建渐变动画效果，使骨架屏看起来更流畅。
用 React 组件动态渲染骨架屏
使用 React 或其他框架，基于数据加载状态（如 loading）来控制显示骨架屏还是实际内容。

例子：用 React 和 CSS 实现一个简单的骨架屏

1. 创建骨架屏组件

import React from 'react';
import './Skeleton.css';

const Skeleton = () => {
  return (
    <div className="skeleton-wrapper">
      <div className="skeleton-avatar"></div>
      <div className="skeleton-text"></div>
      <div className="skeleton-text"></div>
      <div className="skeleton-button"></div>
    </div>
  );
}

export default Skeleton;

2. 添加 CSS 样式

.skeleton-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-avatar {
  width: 60px;
  height: 60px;
  background: #e0e0e0;
  border-radius: 50%;
  animation: skeleton-loading 1.5s infinite ease-in-out;
}

.skeleton-text {
  width: 100%;
  height: 20px;
  background: #e0e0e0;
  border-radius: 4px;
  animation: skeleton-loading 1.5s infinite ease-in-out;
}

.skeleton-button {
  width: 120px;
  height: 36px;
  background: #e0e0e0;
  border-radius: 6px;
  animation: skeleton-loading 1.5s infinite ease-in-out;
}

@keyframes skeleton-loading {
  0% {
    background: #e0e0e0;
  }
  50% {
    background: #f0f0f0;
  }
  100% {
    background: #e0e0e0;
  }
}

3. 使用骨架屏组件

在你加载数据时，使用骨架屏作为占位符，直到数据加载完毕。

import React, { useState, useEffect } from 'react';
import Skeleton from './Skeleton';

const UserProfile = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      setData({
        avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
        name: 'John Doe',
        bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      });
    }, 2000); // 模拟延迟加载
  }, []);

  return (
    <div>
      {data ? (
        <div>
          <img src={data.avatar} alt="Avatar" />
          <h2>{data.name}</h2>
          <p>{data.bio}</p>
        </div>
      ) : (
        <Skeleton />
      )}
    </div>
  );
};

export default UserProfile;

其他优化

骨架屏类型：
- 灰度骨架屏：展示灰色或其他单色块，不显示内容。
- 内容骨架屏：以实际内容的格式展示占位符，如模拟列表、文章的标题和段落。
库支持：如果想要一个更精细的骨架屏，可以使用一些现成的库，比如 react-loading-skeleton 或 @mui/material 自带的骨架屏组件。