当前位置： 首页 > news >正文

【开发实践】前端jQuery+gif图片实现载入界面

news 2025/12/19 14:08:55

一、需求分析

载入界面（Loading screen）是指在计算机程序或电子游戏中，当用户启动应用程序或切换到新的场景时，显示在屏幕上的过渡界面。它的主要作用是向用户传达程序正在加载或准备就绪的信息，以及提供一种视觉上的反馈，告知用户应用程序正在进行处理。

载入界面的作用可以归纳如下：

  1. 提供反馈：当用户启动应用程序或者进行场景切换时，载入界面的出现可以提供一种反馈，告诉用户程序正在处理他们的请求。这样用户就能够明确地知道程序是否在工作状态，以及需要等待的时间。

  2. 缓解等待焦虑：载入界面能够减轻用户在等待过程中的焦虑感。在处理大量数据或者复杂操作时，应用程序可能需要一些时间来加载资源和准备就绪。通过显示一个载入界面，用户能够理解程序正在执行必要的操作，并且知道他们需要等待一段时间。

  3. 品牌展示：载入界面也可以被用作品牌展示的机会。通过在载入界面上使用应用程序的标志、图标、配色方案等元素，可以提升应用程序的品牌形象，增强用户对应用程序的印象。

  4. 提供有用信息：一些载入界面会显示加载进度条、百分比或者其他与加载相关的信息，从而让用户了解到加载的进度。这可以帮助用户更好地估计他们需要等待的时间，以及程序是否正常运行。

总的来说，载入界面在用户体验中起到了重要的作用，它不仅能够提供反馈、缓解等待焦虑，还可以用于品牌展示和提供有用的信息。

二、需求实现

html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title>
</head>
<style>/* Preloader */.preloader {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: #fff;}.preloader img {max-width: 100%;}
</style>
<body><!-- Preloader --><div class="preloader"><!-- <img src="assets/images/preloader.gif" alt="preloader"> --><img width="400px" src="gif/g7.gif" alt="preloader"></div><div><h1>欢迎来到主界面</h1></div>
<script>// hide perloaderwindow.onload = function () {$('.preloader').fadeOut(2000, function () { $('.preloader').remove(); });}
</script>
<script src="jquery.js"></script>
</body>
</html>

三、效果展示

相关文章：

【开发实践】前端jQuery+gif图片实现载入界面

一、需求分析 载入界面&#xff08;Loading screen&#xff09;是指在计算机程序或电子游戏中&#xff0c;当用户启动应用程序或切换到新的场景时&#xff0c;显示在屏幕上的过渡界面。它的主要作用是向用户传达程序正在加载或准备就绪的信息&#xff0c;以及提供一种视觉上的反…...

编程日记 2024/1/19 1:23:10

解析消费全返：谈谈那些关于商业的小妙招

每天五分钟讲解商业模式&#xff0c;大家好我是模式策划啊浩。 在数字化时代&#xff0c;商业模式正在经历前所未有的变革。其中&#xff0c;消费全返的概念正在逐渐崭露头角&#xff0c;引领着商业创新的新潮流。消费全返&#xff0c;顾名思义&#xff0c;是指消费者在购买商…...

编程日记 2024/1/19 1:20:07

如何在MinIO存储服务中通过Buckets实现远程访问管理界面上传文件

文章目录 前言1. 创建Buckets和Access Keys2. Linux 安装Cpolar3. 创建连接MinIO服务公网地址4. 远程调用MinIO服务小结5. 固定连接TCP公网地址6. 固定地址连接测试 前言 MinIO是一款高性能、分布式的对象存储系统&#xff0c;它可以100%的运行在标准硬件上&#xff0c;即X86等…...

编程日记 2024/1/19 1:17:04

算法 - 二分法 / 双指针 / 三指针 / 滑动窗口

文章目录 &#x1f37a; 二分法&#x1f37b; 旋转数组&#x1f942; 33. 搜索旋转排序数组 [旋转数组] [目标值] (二分法) &#x1f37b; 元素边界&#x1f942; 34. 在排序数组中查找元素的第一个和最后一个位置 [有序数组] > [元素边界] > (二分法)&#x1f942; 81. …...

编程日记 2024/1/19 1:14:02

ChatGPT3.5、GPT4.0、DALL·E 3和Midjourney对话与绘画智能体验

MidTool&#xff08;https://www.aimidtool.com/&#xff09;是一个集成了多种先进人工智能技术的助手&#xff0c;它融合了ChatGPT3.5、GPT4.0、DALLE 3和Midjourney等不同的智能服务&#xff0c;提供了一个多功能的体验。下面是这些技术的简要介绍&#xff1a; ChatGPT3.5&am…...

编程日记 2024/1/19 1:13:01

MySQL中锁的概述

按照锁的粒度来分可分为&#xff1a;全局锁&#xff08;锁住当前数据库的所有数据表&#xff09;&#xff0c;表级锁&#xff08;锁住对应的数据表&#xff09;&#xff0c;行级锁&#xff08;每次锁住对应的行数据&#xff09; 加全局锁&#xff1a;flush tables with read lo…...

编程日记 2024/1/19 1:09:59

5396. 棋盘

5396. 棋盘 - AcWing题库 二维差分数组 #include <iostream> #include <vector> using namespace std;int main() {int n, m;cin >> n >> m;vector<vector<int>> v(n 2, vector<int>(n 2));while (m--) {int x1, x2, y1, y2;cin…...

编程日记 2024/1/19 1:08:58

阿里云地域和可用区分布表，2024更新

2024年阿里云服务器地域分布表&#xff0c;地域指数据中心所在的地理区域&#xff0c;通常按照数据中心所在的城市划分&#xff0c;例如华北2&#xff08;北京&#xff09;地域表示数据中心所在的城市是北京。阿里云地域分为四部分即中国、亚太其他国家、欧洲与美洲和中东&…...

编程日记 2024/1/19 1:07:57

Pandas实战100例 | 案例 49: 数值运算

案例 49: 数值运算 知识点讲解 Pandas 提供了进行基本数学运算的简便方法，允许你在 DataFrame 的列之间执行加法、减法、乘法和除法等操作。 数值运算: 直接对 DataFrame 的列应用算术运算符（+, -, *, /）可以执行相应的数值运算。示例代码 # 准备数据和示例代码的运行结果…...

编程日记 2024/1/19 1:03:54

OSI七层协议和五层协议

【 1 】互联网协议交互的基础 硬件设备 光缆 【 2 】OSI七层协议 物理层&#xff08;Physical Layer&#xff09;&#xff1a;负责传输比特流&#xff08;0和1&#xff09;以及物理连接的建立和维护。数据链路层&#xff08;Data Link Layer&#xff09;&#xff1a;提供可…...

编程日记 2024/1/19 1:01:52

深度学习记录--归—化输入特征

归化 归化输入(normalizing inputs),对特征值进行一定的处理&#xff0c;可以加速神经网络训练速度 步骤 零均值化 通过x值更新让均值稳定在零附近&#xff0c;即为零均值化 归化方差 适当减小变量方差 解释 归化可以让原本狭长的数据图像变得规整&#xff0c;梯度下降的…...

编程日记 2024/1/19 0:57:49

Go Build编译打包文件

Go编译打包文件 1、简单打包 程序 main1.go&#xff1a; package mainimport "fmt"func main() {fmt.Println("Hello World!") }打包&#xff1a; # 在linux服务上执行下面的3个命令 # linux平台,生成main1可执行程序 CGO_ENABLED0 GOOSlinux GOARCHam…...

编程日记 2024/1/19 0:56:48

Java网络编程：概述--快速入门

I. 介绍 1.1 什么是网络编程 - 网络编程是指通过计算机网络实现程序之间的通信。在Java中&#xff0c;网络编程通常涉及到数据的传输、通信协议的使用以及与网络相关的各种操作。 1.2. 为什么学习Java网络编程 - Java网络编程是Java开发者重要的技能之一&#xff0c;因为它允许…...

编程日记 2024/1/19 0:55:47

linux配置DNS主从服务器

实验设备 主服务器:OpenElur Linux IP地址为192.168.188.129 从服务器:RedHat Linux IP地址为192.168.188.128 实验步骤 1.进行主服务器的基础配置 #安装DNS对应工具 [rootOpenElurRJW ~]# yum install bind -y#编辑DNS系统配置信息 [rootOpenElurRJW ~]# cat /etc/named.…...

编程日记 2024/1/19 0:53:46

Day34 贪心算法 part03 1005. K 次取反后最大化的数组和 134. 加油站 135. 分发糖果

贪心算法 part03 1005. K 次取反后最大化的数组和 134. 加油站 135. 分发糖果 1005. K 次取反后最大化的数组和 思路 第一步&#xff0c;从前向后遍历&#xff0c;遇到负数将其变为正数&#xff0c;同时K–第二步&#xff1a;如果K还大于0&#xff0c;那么反复转变数值最小的…...

编程日记 2024/1/19 0:49:42

最全对象存储（云盘）挂载本地主机或服务器

1.对象存储介绍 1.1 分类 分布式存储的应用场景相对于其存储接口&#xff0c;现在流行分为三种: 块存储: 这种接口通常以QEMU Driver或者Kernel Module的方式存在&#xff0c;这种接口需要实现Linux的Block Device的接口或者QEMU提供的Block Driver接口&#xff0c;块存储一般…...

编程日记 2024/1/19 0:48:40

24校招，江淮汽车软件测试工程师技术面+HR面

前言 记录一下楼主的面试经历&#xff0c;希望对后来者有用 时间&#xff1a;15min 平台&#xff1a;腾讯会议 过程 技术面试 自我介绍 为啥不考研 实习收获 你有做过软件开发的工作吗&#xff1f; 除了Java和Python&#xff0c;还会其他的语言吗&#xff1f; 学过C吗…...

编程日记 2024/1/19 0:45:38

从零开始学习Zeppelin：大数据可视化分析的交互式开发系统！

介绍&#xff1a;Apache Zeppelin是一个基于Web的交互式开发系统&#xff0c;主要用于进行大数据可视化分析。其核心概念是notebook&#xff0c;所有的操作都可以在notebook中完成。Zeppelin提供了一套非常全面的数据分析解决方案&#xff0c;支持数据采集、数据发现、数据分析…...

编程日记 2024/1/19 0:43:34

VCG 曲面重建之滚球算法

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 滚球算法(BPA)是一种与alpha形状相关的曲面重建方法。直观地想象一个具有给定半径的3D球，我们把它扔在点云上。如果它击中任何3个点(并且它没有穿过这3个点)，它就创造了一个三角形。然后，算法从现有三角形的边缘…...

编程日记 2024/1/19 0:37:29

为什么使用双token实现无感刷新用户认证?

单token机制 认证机制&#xff1a;对与单token的认证机制在我们项目中仅使用一个Access Token的访问令牌进行用户身份认证和授权的方案处理。 不足之处&#xff1a; 安全性较低(因为只有一个token在客户端和服务器端之间进行传递&#xff0c;一目Acess Token被截获或者被泄露…...

编程日记 2024/1/19 0:31:24

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/12/16 10:53:09

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/1 9:48:47

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/10/6 16:38:04

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/12/18 5:17:25

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/12/16 0:36:19

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/12/13 2:58:08

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/12/14 4:06:59

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

编程新知 2025/12/15 3:05:32

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

编程新知 2025/12/5 9:22:30