什么是实现一个装载机动画，而脚本和资源角度加载的最佳方式？ [英] What is the best way to implement a loader animation while scripts and resources are loaded in Angular?

问题描述

我想我的web应用程序的用户是有指示的加载文件和必要的脚本当前进度的进度条psented $ P $。

preferably显示比例，但一个简单的GIF装载机是一个可以接受的解决办法。

什么是实现一个加载器可以显示百分比的指示的最佳途径完加载图像，CSS和JS的角度，如果在所有可能的？

我想有一个小的应用程序，其唯一目的是加载资源和显示进度，当所有的脚本和资源完成后，一些回调消防引导角（angular.bootstrap（））的。

我的猜测是，有一大堆的能想出一个更好的解决方案聪明的家伙，我希望，并认为比我更可以从这个方面一些好的建议中获益。

这也将是不错的可以指定装载机correctedness估计的文件大小：

 ＆LT;脚本加载SRC =// somehost.com/file.js文件大小=100/＆GT;
＆LT; IMG负载SRC = sprite.png文件大小=50/＆GT;
 

解决方案

对于一个光秃秃的骨头，简单的GIF装载机：

HTML

 ＆LT; D​​IV NG秀=displayLoadingIndicator级=LoadingIndicator＆GT;
＆LT; / DIV＆GT;
 

CSS：

  .LoadingIndicator {
  显示：块;
  背景：网址（../ IMG / loading.gif）中心中心不重复;
  位置：绝对的;
  顶部：0;
  左：0;
  宽度：100％;
  高度：100％;
}
 

控制器JS：

 函数MyCtrl（$范围，$ HTTP）{
    $ scope.displayLoadingIndicator =真;
    $ scope.loadStuff =功能（serverResponse）{
        //装载我的东西
        $ 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;

这篇关于什么是实现一个装载机动画，而脚本和资源角度加载的最佳方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！