0

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

Thomas
  • 2,768
  • 3
  • 28
  • 63
  • If you're using Apache, you can set the cache time using `mod_expires`. Here's a link for reference: http://stackoverflow.com/questions/447014/website-image-caching-with-apache – Kyle Feb 28 '14 at 21:42

2 Answers2

1

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)
  });
})()
Andrew Templeton
  • 1,576
  • 8
  • 13
0

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.

Community
  • 1
  • 1
jfriend00
  • 580,699
  • 78
  • 809
  • 825
  • I'm already preloading them on the first page. Is there a way to make sure if the browser caches the images, or to control if they were cached? – Thomas Feb 28 '14 at 21:59
  • You can't force a browser to cache them, though any normal browser will cache them because that's a primary contributor to faster browser performance. Your server could issue headers that would prevent them from being cached so you obviously should make sure it isn't doing that. Do you have a particular implementation problem where the images are not being cached from one page to the next or are you just theorizing about things now. – jfriend00 Feb 28 '14 at 22:16
  • I had / have the problem that it took quite long for each page to load all images (preload), but wasn't sure if it was because of the number and size of each image, or if it was because they were not cached. thus with your answer it is most probably the size and number of images taht causes the problems there. tnx. – Thomas Mar 01 '14 at 07:25