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

news2024/10/3 8:31:24

一、需求分析

载入界面（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>