如何在第一次加载应用程序时显示加载指示符

How to show a loading indicator when loading the app at the first time

本文关键字：加载 显示 指示符 应用程序 第一次      更新时间：2023-09-26

我必须为我的AngularJs单页应用程序加载许多文件，如angular.js、jquery.js、bootstrap.js、bootstrip.css、some_plugins.js、my_main.js和其他文件，

加载整个应用程序需要一些时间，所以我想在void页面中显示一个加载指示符（例如微调器），直到所有js和css文件加载并显示内容。

对于Angular应用程序，请使用Angular Loading Bar。看起来像这样。

  • 将适用于XHR请求以角度发出的任何时候
  • 可以指定不显示加载图标的请求
  • 仅当请求导致用户等待时显示
  • 可以根据您的喜好进行造型
  • 注入到服务模块中并正常工作

我以前在一个几乎完全用Backbone.js编写的遗留项目中使用过Pace.js，在这个项目中，等待所有依赖项的解决是非常痛苦的。

它几乎没有配置，所以如果你正在寻找一个相对简单的库，我会使用它。

编辑：

从文档：

在你的页面上包含你选择的pace.js和主题css（尽可能早），你就完成了！

Pace将自动监控您的ajax请求、事件循环滞后、文档就绪状态以及页面上的元素，以决定进度。在ajax导航上，它将重新开始！

如果您使用AMD或Browserify，请在pace.js中要求，并在加载过程中尽早调用pace.start（）。

示例

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

您只需按以下3个步骤即可完成。

1.在<body>、中添加<div class="se-pre-con"></div>

2.将.se-pre-con css类添加到您的样式中，

3.最后添加以下几个jquery代码：

$(window).load(function () {$(".se-pre-con").fadeOut("slow");});

（别忘了在你的项目中添加JQuery库）

就是这样。

这是一个有效的例子：

<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>title</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="" name="keywords">
        <meta content="" name="description">
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <style>

            body {
                background: green;
            }
            .se-pre-con {
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: url('https://cdn.dribbble.com/users/421466/screenshots/2390664/orbit-400px.gif') center no-repeat white;
                background-size: 150px 150px;
            }
        </style>
    </head>
    <body>
        <div class="se-pre-con"></div>
        <!--==========================
        your body content will come here
        ============================-->

        <script>
            $(window).load(function () {
                $(".se-pre-con").fadeOut("slow");
            });
        </script>
    </body>
    </html>

在本例中，由于页面较轻，加载程序gif会很快消失。但在厚重的页面中，这是解决问题的好方法。

这是一个plunker运行的

我希望它能帮助

相关文章：