前端骨架怎样实现

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

基本实现步骤：

1. 设计骨架结构
   骨架屏的结构应该根据你页面的内容来设计，常见的有文本框、头像、图片等元素。可以使用灰色或浅色背景来模拟真实内容的占位。

2. 使用 CSS 实现动画效果
   使用 @keyframes 来创建渐变动画效果，使骨架屏看起来更流畅。

3. 用 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 自带的骨架屏组件。

参考库

• react-loading-skeleton: 提供了简单的骨架屏组件，支持自定义样式和动画效果。
• @mui/material Skeleton: Material UI 的骨架屏组件，适用于 Material Design 风格的应用。

这样可以大大提升用户体验，避免长时间等待内容加载时的空白页面。你目前有在做这个功能吗？