一、需求分析
载入界面(Loading screen)是指在计算机程序或电子游戏中,当用户启动应用程序或切换到新的场景时,显示在屏幕上的过渡界面。它的主要作用是向用户传达程序正在加载或准备就绪的信息,以及提供一种视觉上的反馈,告知用户应用程序正在进行处理。
载入界面的作用可以归纳如下:
-
提供反馈:当用户启动应用程序或者进行场景切换时,载入界面的出现可以提供一种反馈,告诉用户程序正在处理他们的请求。这样用户就能够明确地知道程序是否在工作状态,以及需要等待的时间。
-
缓解等待焦虑:载入界面能够减轻用户在等待过程中的焦虑感。在处理大量数据或者复杂操作时,应用程序可能需要一些时间来加载资源和准备就绪。通过显示一个载入界面,用户能够理解程序正在执行必要的操作,并且知道他们需要等待一段时间。
-
品牌展示:载入界面也可以被用作品牌展示的机会。通过在载入界面上使用应用程序的标志、图标、配色方案等元素,可以提升应用程序的品牌形象,增强用户对应用程序的印象。
-
提供有用信息:一些载入界面会显示加载进度条、百分比或者其他与加载相关的信息,从而让用户了解到加载的进度。这可以帮助用户更好地估计他们需要等待的时间,以及程序是否正常运行。
总的来说,载入界面在用户体验中起到了重要的作用,它不仅能够提供反馈、缓解等待焦虑,还可以用于品牌展示和提供有用的信息。
二、需求实现
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 perloader
window.onload = function () {
$('.preloader').fadeOut(2000, function () { $('.preloader').remove(); });
}
</script>
<script src="jquery.js"></script>
</body>
</html>