1

The standard way to preload Image files in JavaScript seems to be something like this:

var images_to_load = ['img1.png', 'img2.png', 'img3.png'];
for(var i=0; i<images_to_load.length; i++){
  var img = new Image();
  img.src = images_to_load[i];
}

This loads the image into the cache by getting the browser to request the image file. However, there's no guarantee that the image file sticks around in the cache, as the cache expiration time is dependent on server settings and browser settings.

Is an image guaranteed to remain in the cache until the page is closed if you keep the Image object in memory? Here's a basic example:

var images_to_load = ['img1.png', 'img2.png', 'img3.png'];
var loaded_images = [];
for(var i=0; i<images_to_load.length; i++){
  var img = new Image();
  img.src = images_to_load[i];
  loaded_images.push(img);
}
Community
  • 1
  • 1
Josh de Leeuw
  • 1,425
  • 1
  • 11
  • 13
  • why not use localstorage, webstorage? – hubman Jan 04 '17 at 21:31
  • It's my understanding that localStorage / sessionStorage can't store image files. I know there are ways to encode images as DataURIs, but that's not an ideal solution for my particular problem. – Josh de Leeuw Jan 04 '17 at 21:34
  • I attempted to clarify the bolded sentence. The way it was originally phrased sounded very strange to me (my brain stumbled about while parsing the sentence). I'm making this comment to verify with the OP that I didn't accidentally change the meaning of the bolded statement. –  Jan 04 '17 at 21:59
  • I appreciate the change; it was awkwardly phrased. I've attempted to change it to keep the improved clarity and also keep the original meaning (which is asking whether or not this is even possible). – Josh de Leeuw Jan 05 '17 at 01:14

2 Answers2

1

No, there is not any guarantee.

What you have in the JavaScript memory is completely different than what the browser has in the cache. A possible solution is to create new instance of your images before the cache expiration time. If you repeat this progress, you can make sure your images are always available in the cache.

Arashsoft
  • 2,308
  • 4
  • 28
  • 52
  • Can JavaScript get access to the cache expiration time? – Josh de Leeuw Jan 05 '17 at 14:47
  • @Josh, I do not think it is possible. I have to update my answer, even if you know the expiration time, it is possible that cache gets full before the expiration time and browser starts to delete old contents. – Arashsoft Jan 05 '17 at 14:51
0

You can cache and even preload images using service workers

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

there is sample code https://github.com/mdn/sw-test/

And learn more about offline-first here: http://offlinefirst.org/

Lukas Liesis
  • 17,690
  • 7
  • 93
  • 89
  • Neat. The [lack of cross-browser support](http://caniuse.com/#feat=serviceworkers) is a dealbreaker, but it's good to know that there are options that are coming in the future. – Josh de Leeuw Jan 05 '17 at 17:47