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

Question

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

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

Answer 1

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

适用于XHR请求以角度出现的情况
可以指定哪个请求不显示加载图标
仅在请求导致用户等待时显示
可以根据自己的喜好设计风格
注入服务模块并正常工作

Answer 2

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

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

编辑：

来自Docs：

在您的页面上包含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>

Answer 3

你可以按照以下3个步骤简单地完成它。

1.add <div class="se-pre-con"></div>在<body>里面，

2.add .se-pre-con css class to your styles，

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消失得非常快。 但在繁重的页面中，这是一个很好的解决方案。

这是一个吸引人的运行

我希望它有所帮助

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

问题描述

3 个解决方案

解决方案1
26 已采纳 2014-05-08 16:47:06

解决方案2
14 2014-04-26 21:32:04

来自Docs：

解决方案3
0 2019-05-29 10:49:37

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

问题描述

3 个解决方案

解决方案1 26 已采纳 2014-05-08 16:47:06

解决方案2 14 2014-04-26 21:32:04

来自Docs：

解决方案3 0 2019-05-29 10:49:37

解决方案1
26 已采纳 2014-05-08 16:47:06

解决方案2
14 2014-04-26 21:32:04

解决方案3
0 2019-05-29 10:49:37