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

Question

一个简单的问题，我正在从外部站点加载图像，我想推迟我的resolve，直到它们完成加载。

我的特定 View 的 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

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

这样做的缺点是，一旦 View 请求图像，浏览器就会对图像发出另一个 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;
   }
}