AngularJS Разрешите дождаться загрузки внешних изображений

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

Вы можете вручную загрузить изображения, которые вы хотите, в вложенном запросе $ http внутри функции успеха resolve.item. Просто разрешите обещание в обратном вызове успеха на изображении, и ваше представление не будет отображаться до тех пор, пока изображение не будет загружено.

Недостаток этого браузера сделает другой 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; 
    } 
}