javascript - AngularJS Resolve 等待外部图像加载完毕

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 数组。一旦来自这些 URL 的数据完成加载，是否有可能解决，或者我在这里有点不走运？

Answer 1

You can manually load the image(s) you want in a nested $http request inside the success function of resolve.item. Simply resolve the promise in the success callback on image, and your view will not be rendered until the image has been loaded.

The downside of this is the browser will make another http request for the image once the view asks for it, but it will already been cached and ready to go.

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;
   }
}