Javascript 首次加载应用程序时如何显示加载指示器_Javascript_Jquery_Css_Angularjs_Twitter Bootstrap

Javascript 首次加载应用程序时如何显示加载指示器

javascript jquery css angularjs twitter-bootstrap

Javascript 首次加载应用程序时如何显示加载指示器,javascript,jquery,css,angularjs,twitter-bootstrap,Javascript,Jquery,Css,Angularjs,Twitter Bootstrap,我必须为我的AngularJs单页应用程序加载很多文件，比如angular.js、jquery.js、bootstrap.js、bootstrap.css、一些plugins.js、my_main.js和其他加载整个应用程序需要一些时间，因此我想在一个空白页面中显示一个加载指示器（例如微调器），直到加载所有js和css文件，然后显示内容。我以前在一个几乎完全用Backbone.js编写的遗留项目中使用过，在这个项目中，等待所有依赖项的解决非常痛苦它几乎没有配置可供使用，所以如果您正在寻找一个

我必须为我的AngularJs单页应用程序加载很多文件，比如angular.js、jquery.js、bootstrap.js、bootstrap.css、一些plugins.js、my_main.js和其他

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

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

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

编辑：

从文档中：在您的页面上包含您选择的pace.js和主题css（尽可能早），您就完成了

Pace将自动监视ajax请求、事件循环延迟、文档就绪状态以及页面上的元素，以确定进度。在ajax导航上，它将再次开始

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

范例

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

用于角度应用程序。看起来像

将应用于XHR请求在任何时候发出
可以指定不显示加载图标的请求
仅当请求导致用户等待时显示
可以根据您的喜好来设计
注入到服务模块并正常工作

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

1.在

中添加

2.将

.se pre-con

css类添加到您的样式中

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

$（window）.load（函数（）{$（“.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>


标题
身体{
背景：绿色；
}
.se预检{
位置：固定；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
z指数：9999；
背景：url（'https://cdn.dribbble.com/users/421466/screenshots/2390664/orbit-400px.gif’）中心不重复白色；
背景尺寸：150px 150px；
}
$（窗口）。加载（函数（）{
美元（“.se pre con”）。淡出（“缓慢”）；
});

在本例中，由于页面较轻，加载程序的速度非常快。但在厚页中，这是解决您问题的好方法
这是一次跑步
我希望它能有所帮助
我要指出，角度加载条适用于所有页面加载，而不仅仅是第一个页面加载。这真是太棒了。如果可以的话，我会给你+100。当这与问题无关时，怎么能提高投票率？角度加载条和其他加载条需要初始化/引导角度，但问题是关于引导前动画。我错过了什么？