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。看起来像this。

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

Answer 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>

Answer 3

您可以按照以下三个步骤简单地进行操作。

1。在<div class="se-pre-con"></div>内添加<body>

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运行

我希望它对您有帮助

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

3 个答案:

来自文档：