首次加载应用时如何显示加载指示器答案

【问题标题】：How to show a loading indicator when loading the app at the first time首次加载应用时如何显示加载指示器
【发布时间】：2014-06-12 13:12:01
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery css angularjs twitter-bootstrap

【解决方案1】：

对于 Angular 应用，请使用 Angular Loading Bar。看起来像this。

适用于 XHR 请求以角度发出的任何时候
可以指定哪个请求不显示加载图标
仅在请求导致用户等待时显示
可以根据自己的喜好设计样式
注入到服务模块中并且可以正常工作

【讨论】：

我会指出 Angular 加载栏适用于所有页面加载，不一定只是第一个。
这太棒了。如果可以的话，我会给你 +100。
当它与问题无关时，怎么能被赞成？ Angular Loading Bar 和其他工具需要 Angular 进行初始化/引导，但问题是关于预引导动画。我错过了什么？

【解决方案2】：

我之前在一个几乎完全用 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】：

您可以通过以下 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 运行

希望对你有帮助

【讨论】：