3

我希望我的 Web 应用程序的用户看到一个进度条，指示当前加载文件和所需脚本的进度。

最好显示百分比，但简单的加载器 gif 是可接受的解决方案。

如果可能的话，实现加载器的最佳方法是什么？

我正在考虑拥有一个小型应用程序，其唯一目的是加载资源并指示进度，并且当所有脚本和资源完成后，触发一些回调以引导角度（angular.bootstrap（））。

我的猜测是，有很多聪明人可以提出更好的解决方案，我希望并认为比我更多的人可以从一些好的建议中受益。

能够为加载程序的正确性指定估计的文件大小也很好：

<script load-src="//somehost.com/file.js" filesize="100"/>
<img load-src=sprite.png" filesize="50"/>
4

2 回答 2

2

您是在谈论<script>标签和<link>标签等的加载吗？如果是这样，您可以使用 ng-cloak。使用 ng-cloak CSS 隐藏所有内容，并默认显示微调器。然后在角度完全加载后移除微调器。有关 ng-cloak 的更多信息

如果您的意思是在完成一组您自己的 HTTP 请求之前加载微调器，您可以使用angular-promise-tracker跟踪 HTTP 请求并捕获“开始”和“完成”事件以提高百分比。

这是加载微调器的 http 请求示例：http: //plnkr.co/edit/SHtk7eSrbs1dfoQawPCW ?p=preview

于 2013-02-19T00:41:28.737 回答
2

对于一个简单的骨骼，简单的加载器 gif：

HTML：

<div ng-show="displayLoadingIndicator" class="LoadingIndicator">
</div>

CSS：

.LoadingIndicator {
  display: block;
  background: url(../img/loading.gif) center center no-repeat;
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}

控制器 JS：

function MyCtrl($scope, $http) {
    $scope.displayLoadingIndicator = true;
    $scope.loadStuff = function (serverResponse) {
        // load my stuff
        $scope.displayLoadingIndicator = false;
于 2013-04-30T09:47:15.630 回答