AngularJS Allow to wait for external images to load

Question

The simple question is, I am downloading images from an external site, and I want to keep my resolve until they finish uploading.

The My resolve property for a specific view is as follows:

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

It contains data from my database, which has a field called imgs containing an array of URLs. Can I resolve as soon as the data from these URLs has finished loading, or am I out of luck here?

Answer 1

You can manually upload the image (s) you want in the $ http sub-request inside the resolve.item success function. Just allow the promise of a success callback on the image, and your view will not be displayed until the image is loaded.

The disadvantage of this is that the browser will make another http request for the image as soon as the view requests it, but it will already be 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; } }