在 Angular 中加载脚本和资源时实现加载器动画的最佳方法是什么?

问题描述

我希望我的 Web 应用程序的用户能够看到一个进度条，指示加载文件和必要脚本的当前进度.

最好显示百分比，但简单的加载程序 gif 是可以接受的解决方案.

实现加载器的最佳方法是什么，如果可能的话，它可以显示在 Angular 中完成加载图像、css 和 js 的百分比指示?

我正在考虑开发一个小型应用程序，其唯一目的是加载资源并指示进度，当所有脚本和资源完成时，会触发一些回调以启动 angular (angular.bootstrap()).

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

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

<img load-src=sprite.png" filesize="50"/>

解决方案

对于一个简单的骨架，简单的加载器 gif:

HTML:

CSS:

.LoadingIndicator {显示:块；背景: url(../img/loading.gif) center center 不重复；位置:绝对；顶部:0;左:0;宽度:100%；高度:100%；}

控制器JS:

function MyCtrl($scope, $http) {$scope.displayLoadingIndicator = true;$scope.loadStuff = 函数(服务器响应){//加载我的东西$scope.displayLoadingIndicator = false;

I want users of my web application to be presented with an progress bar indicating current progress of loading files and scripts necessary.

Preferably showing percentage, but a simple loader gif is an acceptable solution.

What is the best way to implement a loader that could show an indication of percentage finished loading images, css and js in Angular, if at all possible?

I'm thinking of having a small application whose only purpose is to load resources and indicate progress, and when all scripts and resources are finished, fire of some callback to boot angular (angular.bootstrap()).

My guess is that there are a bunch of smart guys that could come up with a better solution, and I hope and think that more than me can benefit from some good advice regarding this.

It would also be nice to be able to specify an estimated file size for loader correctedness:

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

解决方案

For a bare bones, simple loader 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%;
}

Controller JS:

function MyCtrl($scope, $http) {
    $scope.displayLoadingIndicator = true;
    $scope.loadStuff = function (serverResponse) {
        // load my stuff
        $scope.displayLoadingIndicator = false;

这篇关于在 Angular 中加载脚本和资源时实现加载器动画的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！