在Angular中加載腳本和資源時，實現加載器動畫的最佳方式是什麼？

我希望我的web應用程序的用戶能夠看到一個進度條，表示加載所需文件和腳本的當前進度。在Angular中加載腳本和資源時，實現加載器動畫的最佳方式是什麼？

最好顯示的百分比，但一個簡單的加載器gif是一個可接受的解決方案。

如果可能的話，實現加載器的最佳方式是什麼，可以顯示已完成加載的圖像，css和js的完成百分比的指示？

我在想一個小應用程序，它的唯一目的是加載資源並指示進度，當所有腳本和資源完成時，啓動一些回調函數（angular.bootstrap（））。

我的猜測是，有很多聰明的人可以提出更好的解決方案，我希望並且認爲比我更能從一些好的建議中獲益。

這也將是不錯的可以指定裝載機correctedness一個估計的文件大小：

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

來源

2013-02-18 Kenneth Lynne

使用正確的src加載圖像，因此瀏覽器不必等待腳本並創建一個指令來隱藏它。非常懷疑你會得到進展百分比 – charlietfl 2013-02-19 00:13:23

你在談論的<script>標籤和標籤<link>等只是加載？如果是這樣，你可以使用ng-cloak。使用ng-cloak CSS隱藏所有內容，並默認顯示一個微調器。然後在角度完全加載時卸下旋轉器。 more info about ng-cloak

如果您的意思是加載微調器直到完成一組您自己的HTTP請求，則可以使用angular-promise-tracker來跟蹤HTTP請求並捕獲「開始」和「完成」事件以提高百分比。

這裏的http請求加載微調的例子：http://plnkr.co/edit/SHtk7eSrbs1dfoQawPCW?p=preview

來源

2013-02-19 00:41:28

這個搶劫者應該工作嗎？ – boatcoder 2013-12-09 20:06:23

那個笨蛋不工作... :-( – MarcoS 2014-07-20 09:24:35

對於裸露的骨頭，簡單裝載機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-30 09:47:15

在Angular中加載腳本和資源時，實現加載器動畫的最佳方式是什麼？

回答

相關問題