Javascript 使用angular service promise在$http请求后预加载图像

我需要在$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请求检索到的图像，它不起作用

在使用此方法显示视图之前，如何在缓存中预加载图像

我必须遍历数据进入成功回调或其他地方

---

谢谢

获取您从原始请求中收到的URL，但不是立即解决承诺，而是为每个图像创建一个新的承诺。使用您喜欢的任何方法预加载图像（但需要回调来解析其承诺），并在加载图像后解析每个承诺。你应该得到一系列的图像承诺。然后从resolve返回

$q.all（imagePromises）

。看看这本书

$q.all

将返回一个承诺，该承诺只有在传递给它的所有承诺都得到解决时才会得到解决

---

我还没有测试过它，但我认为您可能可以在每个图像URL上使用

$http

，它会为您缓存它，并向您承诺将其传递到

$q.all

。因此，基本上您将有一个

$http

调用数组

您可以在控制器中这样使用

$scope.preloader = true

然后，你可以使用角度的承诺

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

  $scope.preloader = false;
}

在错误块中还有$scope.preload=false

如果同时并行地有多个Ajax调用，那么使用

$scope.preloader = 0;

关于说明请求使用

$scope.preloader++;

什么时候使用

$scope.preloader--;

你可以在这里有更清楚的答案

---

什么是图像？包含图像链接的数据？或者您实际上正在使用

$http

尝试返回二进制图像？我的意思是图像的url扫描我是否将其添加到$http成功回调<代码>变量img=[]；angular.forEach（data.posts，函数（value，key）{img[key]=newimage（）；img[key].src=value.custom_fields.projectCover；}）只需尝试

img=[]；ForEach（data.posts，函数（value）{img.push（$http（value.custom_fields.projectCover））；}）

后面跟着

$q.all（img）

我在您的建议中遇到了这个错误：

TypeError:无法读取未定义的属性“protocol”

我为每个图像向$http服务添加了“method”和“url”参数，但它仍然不起作用。我的意思是不再是一个渐进加载，而是每次显示一次加载时的每个图像。（很明显，按照大小的顺序），如果没有看到确切的代码，很难说它是什么。听起来路径没有正确地传递到$http。