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

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.看起来像这样.

当它与问题无关时,如何对它进行投票？Angular Loading Bar和其他人需要Angular进行初始化/自举,但问题是关于pre-bootstrap动画.我错过了什么？ (7认同)
我会指出Angular Loading Bar适用于所有页面加载,不一定只是第一个加载. (2认同)

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>