首次加载应用时如何显示加载指示器
Posted
技术标签:
【中文标题】首次加载应用时如何显示加载指示器【英文标题】：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 文件加载然后显示内容。
【问题讨论】：
【参考方案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 运行
希望对你有帮助
【讨论】：
以上是关于首次加载应用时如何显示加载指示器的主要内容，如果未能解决你的问题，请参考以下文章