Question

一个简单的问题，我正在加载来自外部网站的图片，我想要暂停我的resolve，直到他们完成加载。

特定视图的resolve属性如下所示：

    resolve :{
      item: function($q, $route, $http, $timeout){

        var deferred = $q.defer();
        console.log("Params are " + $route.current.params.id);
        $http.get('/api/post/' + $route.current.params.id, { cache: true}).
          success(function(data) {
            if(data.post.length === 1){
              $http.get('/api/designerAlso/' + data.post[0].designer + '/' + data.post[0].gender, { cache: true})
              .success(function(results){
                data.post[0].sameDesigner = results.sameDesigner;
                successCb(data.post);
              });
            }else{
              successCb(data.post); 
            }
          });
          var successCb = function(result){
            if (angular.equals(result, [])){
              deferred.reject("Sorry, we couldn't find that item!");
            }else{
              deferred.resolve(result);
            }
          }

          return deferred.promise;
      }
    }

它从我的数据库中引入数据，该数据库有一个名为imgs的字段，其中包含一个URL数组。一旦这些网址中的数据加载完毕就可以解决，还是我在这里运气不好？

Answer 1

您可以在resolve.item的success函数内的嵌套$ http请求中手动加载所需的图像。只需解决图像上成功回调的承诺，在图像加载之前，您的视图将不会呈现。

这样做的缺点是，一旦视图要求，浏览器将为图像发出另一个http请求，但它已经被缓存并准备好了。

resolve: {
   item: function () {
       var deferred = $q.defer();
       $http.get(*data call*).success(function (data) {
            $http.get(*image*).success(function () {
                deferred.resolve(data);
            });
       });
       return deferred.promise;
   }
}

AngularJS Resolve等待外部图像加载

1 个答案: