在$ http請求后預加載圖像，並提供有角度的服務承諾

Question

我需要在$ http服務后預加載圖像。

現在在我的應用程序中，我正在使用Promise / Resolve方法向服務中預加載數據。 這是我的服務：

angular.module('davelab.services', [])

.factory('srvProjects', ['$http', function ($http) {
    var API = '/backend/api/';

    var sdo = {

        getProjects: function() {

            var promise = $http({ method: 'GET', url:  API + 'get_posts/' }).success(function(data, status, headers, config) {
                return data;
            });

            return promise;

        }

    };

    return sdo;


}]);
});

這是路線部分：

 $routeProvider.when('/projects', {
        templateUrl: 'app/partials/list-projects.html',
        controller: 'ProjectsCtrl',
        resolve: {
                projects: function(srvProjects) {
                return srvProjects.getProjects();
            }
        }
    });

它可以很好地處理數據，但對於從api請求中檢索到的圖像則不起作用。

在使用此方法顯示視圖之前，如何在緩存中預加載圖像？

我必須遍歷數據進入成功回調或其他地方？

謝謝。

Answer 1

使用您從原始請求中收到的URL，但不要立即解決承諾，而是為每個圖像創建一個新的承諾。 使用您喜歡的任何方法預加載圖像（但是它需要回調來解決其承諾），並在圖像加載后解析每個承諾。 您最終應該獲得一系列圖像承諾。 然后從您的決心中返回$q.all(imagePromises) 。 查看文檔中的$ q 。

$q.all將返回一個承諾，該承諾僅在傳遞給它的所有承諾都得到解決時才解決。

我還沒有測試過，但是我認為您也許可以在每個圖像URL上使用$http ，它將為您緩存它，並給您一個很好的承諾，可以傳入$q.all 。 因此，基本上，您將有一系列$http調用。

Answer 2

您可以在控制器中這樣使用

$scope.preloader = true

那么你可以使用

.then(function(result){
  //your code goes here

  $scope.preloader = false;
}

另外在錯誤塊中您有$ scope.preloader = false

如果您同時並行有多個Ajax調用，請使用

$scope.preloader = 0;

說明請求使用

$scope.preloader++;

以及何時使用

$scope.preloader--;

您可以在此處顯示更清晰的答案， 在$ http請求期間以角度顯示Spinner GIF