CODEWITHSUNDEEP
htmlangularjspreload
supersize
supersize

Reputation: 14833

image preload on angular js routing behaviour

I'm building a SPA with Angular and wonder how images or large files in general are handled over $routeProvider. Given the case that I'm having this routes:

.when('/', {
    templateUrl : 'pages/home.html',
    controller  : 'mainController'
})

.when('/contact', {
    templateUrl : 'pages/contact.html',
    controller  : 'contactController'
});

and inside contact.html there are loads of big images. Does home.html already notices these images, and starts to download them somehow, or do I need a JS way to do this.

Thanks

Upvotes: 0

Views: 1047

Answers (3)

allenhwkim
allenhwkim

Reputation: 27748

Just add <img src="big-image.png" style="display:none" /> into home.html to preload it.

Upvotes: -1

hamstu
hamstu

Reputation: 1644

As far as I understand the route template is not loaded until the route is triggered. And the trigger will happen when all of the resolve object is resolved

If you want to preload images, then using the resolve property in your route definition is probably the best solution. You can refer to the $routeProvider documentation here.

Essentially, you would do something like this:

.when('/contact', {
  templateUrl : 'pages/contact.html',
  controller  : 'contactController',
  resolve : 
    imageData: function(Preloader) {
      return Preloader.preload();
    }
});

Assuming that the Preloader.preload() returns a promise, then your route will only complete once the images are preloaded.

The Preloader service would have to know the images to load, which you could either pass in directly when you call preload(), or maybe pass in the templateUrl and have it parse out the images that way. Anyway, hopefully this starts you off in the right direction!

Upvotes: 2

skewl84
skewl84

Reputation: 184

The answer is Yes. The above code uses basic AngularJs routing configuration and all the defined resources in the routing configuration are downloaded straight away.

However, if you would like to lazy load these resources have a look at resolve option of the routing configuration and requireJS ( further reading purpose only)

Upvotes: 0

Related Questions