Eager loading images in Angular

Question

I am writing an angular app that shows image galleries. I want to eager load the images (from URLs) in "next" gallery before the user clicks "next" so that the next gallery appears to load instantaneously.

I can think of a way to do this by having hidden fields that are made visible but that doesn't seem particularly graceful. Is there a better way?

Answer 1

Have an array of image urls and create an image with them.

['image1.jpg', 'image2.jpg'].forEach(url => {
  (new Image()).src = url;
});