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

news/2025/3/17 14:16:01/文章来源:https://www.cnblogs.com/yunbaomengnan/p/18503612

一、什么是骨架屏?

骨架屏是一种在短视频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;

骨架屏的最佳实践

保持骨架屏与实际内容的一致性
为了确保用户不会感知到内容的“跳动”,骨架屏的结构和样式应该与短视频app开发源码的最终加载的内容一致。

使用占位符
占位符可以帮助页面保持稳定的布局,防止内容在加载完成前发生大的布局变化。

优化骨架屏的性能
为了提高短视频app开发源码性能,应该减小骨架屏的大小,并确保它们以最快的速度加载。

以上就是短视频app开发源码,骨架屏技术优化前端体验, 更多内容欢迎关注之后的文章

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/822207.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

类型转换:面试题

1.请问该代码是否有误?答:有误,之前说过byte在运算时会提升为int,所以是int a+b,c不能用byte . 2.该如何修正代码? . 答:我们可以将c的类型换成int . 3.下列修正代码错在哪里?该如何正确修正?答:这么转换毫无意义,因为a和b本来就是byte类型,而且这样转换,a和b还是…

Windows下远程桌面进行【互传文件】

1.开始-mstsc-远程桌面连接 2.远程连接 - 显示选项 3.显示选项 - 本地资源 - 选择 详细信息 4.选择文件所在的磁盘 选择后的磁盘位置可以在 远程桌面和本地资源之间关联。两地可以相互拷贝文件。 配置后进行连接即可。5.传输文件 从本地复制文件,可以直接粘贴到远程的电脑上…

Windows 10 version 22H2 (updated Oct 2024) 中文版、英文版下载

Windows 10 version 22H2 (updated Oct 2024) 中文版、英文版下载Windows 10 version 22H2 (updated Oct 2024) 中文版、英文版下载 Windows 10 22H2 企业版 arm64 x64 请访问原文链接:https://sysin.org/blog/windows-10/ 查看最新版。原创作品,转载请保留出处。 作者主页:…

Windows 10 on ARM, version 22H2 (updated Oct 2024) ARM64 AArch64 中文版、英文版下载

Windows 10 on ARM, version 22H2 (updated Oct 2024) ARM64 AArch64 中文版、英文版下载Windows 10 on ARM, version 22H2 (updated Oct 2024) ARM64 AArch64 中文版、英文版下载 基于 ARM 的 Windows 10 请访问原文链接:https://sysin.org/blog/windows-10-arm/ 查看最新版。…

BeanFactory 和 ApplicationContext 的区别

这是 Spring Framework 对 ApplicationContext 的解释: The org.springframework.context.ApplicationContext interface represents the Spring IoC container and is responsible for instantiating, configuring, and assembling the beans. ApplicationContext 代表 Sprin…

读数据工程之道:设计和构建健壮的数据系统20数据工程存储抽象

数据工程存储抽象1. 数据工程存储抽象 1.1. 数据工程存储抽象是数据组织和查询模式,位于数据工程生命周期的核心,建立在之前讨论的数据存储系统之上 1.2. 关键的考虑1.2.1. 目的和用例1.2.1.1. 必须首先确定存储数据的目的1.2.2. 更新模式1.2.2.1. 是否针对批量更新、流式插入…

linux 下 github ssh 无法连接

https://github.com/orgs/community/discussions/55269author : lukelmouse

Sharding-JDBC笔记02-Sharding-JDBC执行原理

一、基本概念 在了解Sharding-JDBC的执行原理前,需要了解以下概念: 逻辑表 水平拆分的数据表的总称。例:订单数据表根据主键尾数拆分为10张表,分别是 t_order_0 、 t_order_1 到t_order_9 ,他们的逻辑表名为 t_order 逻辑表 在分片的数据库中真实存在的物理表。即上个示例…

C中的open(), write(), close(), fopen()

open() 函数原型#include <fcntl.h> #include <unistd.h>int open(const char *pathname, int flags, mode_t mode);pathname:要打开的文件的路径。flags:打开文件的模式(如只读、只写等)。常用的标志包括:O_RDONLY:只读模式。 O_WRONLY:只写模式。 O_RDWR:…

C#数据结构与算法4-C# 简单排序方法

一 排序 排序(Sort)是计算机程序设计中的一种重要操作,也是日常生活中经常遇到的问题。例如,字典中的单词是以字母的顺序排列,否则,使用起来非常困难。同样,存储在计算机中的数据的次序,对于处理这些数据的算法的速度和简便性而言,也具有非常深远的意义。 二 基本概念…

C#数据结构与算法5-C# 快速排序

一 快速排序 快速排序由于排序效率综合来说你几种排序方法中效率较高,因此经常被采用,再加上快速排序思想----分治法也确实实用,因此很多软件公司的笔试面试,包括像腾讯,微软等知名IT公司都喜欢考这个,还有大大小的程序方面的考试如软考,考研中也常常出现快速排序的身影…

C#数据结构与算法4-C# 快速排序

一 快速排序 快速排序由于排序效率综合来说你几种排序方法中效率较高,因此经常被采用,再加上快速排序思想----分治法也确实实用,因此很多软件公司的笔试面试,包括像腾讯,微软等知名IT公司都喜欢考这个,还有大大小的程序方面的考试如软考,考研中也常常出现快速排序的身影…