CODEWITHSUNDEEP
javascripthtmlimage
Thomas
Thomas

Reputation: 2984

Caching preloaded images possible over page switch?

I'm currently trying to preload images for a webpage I'm creating as those images are quite big.

Currently I know (thanks to another post here) how to handle the images themselves via preloading them (via javascript pre loading and then displaying them in a canvas).

BUT whenever I switch the page the preloaded images need to be preloaded again, thus they are not cached.

So my question is: Is there any possibility to cache these images? (or is it even best to put them into a session variable?)

The images themselves are quite big and can take up 1.5MB each (in total there are 20 images alone in the part that is currently already in existence, which takes about 4 seconds to preload).

As infos if necessary: I'm using an apache server and php as primary language with javascript as support.

Edit: As I forgot to mention it: The webserver I will finally store the site on is an external one (hosting provider) so I won't be able to edit the webserversettings themselves there

Upvotes: 0

Views: 252

Answers (2)

jfriend00
jfriend00

Reputation: 707386

The browser already caches the images in its memory and/or disk cache as long as the headers coming from the server aren't telling it to avoid caching. The browser cache endures across page loads. SO, if your images have been loaded once on the first page, they should be in the browser cache already for the second page and thus when requested on the second page, they should load locally and not have to be fetched over the internet.

If you're looking for client-side code that can be used to preload images, there are many examples:

How do you cache an image in Javascript

Image preloader javascript that supports events

Is there a way to load images to user's cache asynchronously?

FYI, it is possible in newer browsers to use a combination of Local Storage and data URIs to implement your own image caching, but I'd be surprised if there was any real world situation where that was required and if you have a lot of images, you may run into storage limits on Local Storage quicker than limits on the size of the browser cache.

Upvotes: 0

Andrew Templeton
Andrew Templeton

Reputation: 1696

If the images don't change, try something like this in .htaccess:

#Set caching on image files for 11 months
<filesMatch "\.(ico|gif|jpg|png)$">
  ExpiresActive On
  ExpiresDefault "access plus 11 month"
  Header append Cache-Control "public"
</filesMatch>

If you think this is not the right approach, like the images may change, just eager-load the images right when the page hits (warning, definitely a hack):

(function(){
  var hiddenCache = document.createElement("div");
  hiddenCache.style.display = "none";
  document.body.appendChild(hiddenCache);
  // or for loop if ECMA 3
  myEagerLoadedImageUrls.forEach(function(urlStr){
    var hiddenImg = document.createElement("img");
    hiddenImg.src = urlStr;
    hiddenCache.appendChild(hiddenImg)
  });
})()

Upvotes: 1

Related Questions