No caching of dynamically loaded images in Google

Question

Images loaded with jQuery, aren't saved in the Google Chrome's cache? It downloads from the server every time.

THE SITUATION: I'm using jQuery slimbox2 to load a picture in a 'lightbox'. Nothing special at this point. I added some jQuery code that detects when the mouse cursor goes over the lightbox image: when this happens, I load dynamically a version of the lightbox picture, but bigger (like a zoom) by changing the css background of a div.

THE PROBLEM: When the cursor goes in the lightbox for first time, it's supposed to load the 'big' image, and with all browsers the image keeps in cache, so when the cursor goes out, and in for 2nd time, the 'big' image it's already downloaded, so it doesn't take that split second or 1 second to download.

With Chrome it downloads again and again, every time. (There are even more problems, because the mousein mouseout event of the lightbox pagination layers make this extra download = image flicking all the time [image download]).

THE EXAMPLE: My English is quite brutal and it's late. Just check the example to understand :) http://motocross.es/f/oneal/casco-oneal-7-series-mayhem-roots/996

Thanks in advance, and forgive my English level.

Answer 1

try to store them into the local store ibm.com localstorage example

<script>
    var hero;
    if ( localStorage.getItem('heroImg')) {
        hero = localStorage.getItem('heroImg');
    }else {
        hero = '/9j/4AAQSkZJRgABAgAAZABkAAD/7    /.../    6p+3dIR//9k=';
        localStorage.setItem('heroImg',hero);
    }

    document.getElementById("hero-graphic").src='data:image/png;base64,' + hero;
</script>

<img id="hero-graphic" alt="Blog Hero Image" src="" />

Answer 2

I believe this is because the headers sent with your image don't say anything about its caching. By which I mean that your image URL:

http://motocross.es/ajax/shop.ajax.original_pic.php?file=ref_44_1szyh6a9s5mh3ixc.jpg

...serves the image with these headers:

  HTTP/1.1 200 OK
  Date: Sat, 16 Mar 2013 10:00:13 GMT
  Server: Apache/2.2.21 (FreeBSD) mod_ssl/2.2.21 OpenSSL/0.9.8q DAV/2 mod_fastcgi/2.4.6
  Content-Length: 79741
  Keep-Alive: timeout=3, max=1000
  Connection: Keep-Alive
  Content-Type: 

Which say nothing about how the image should be cached. Compare that with, for example, the basic, smaller image on the main page:

http://motocross.es/upload/shop/vendedores/44/productos/standard/cropped_ref_44_1szyh6a9s5mh3ixc.jpg

...where the headers look like this:

  HTTP/1.1 200 OK
  Date: Sat, 16 Mar 2013 10:00:42 GMT
  Server: Apache/2.2.21 (FreeBSD) mod_ssl/2.2.21 OpenSSL/0.9.8q DAV/2 mod_fastcgi/2.4.6
  Last-Modified: Fri, 08 Mar 2013 03:04:33 GMT
  ETag: "2726d07-d1c9-4d761151f1240"
  Accept-Ranges: bytes
  Content-Length: 53705
  Cache-Control: max-age=1296000, public, must-revalidate
  Keep-Alive: timeout=3, max=1000
  Connection: Keep-Alive
  Content-Type: image/jpeg

See the extra caching instructions? There's a Cache-Control header there, which is probably the important bit, as well as other caching information like an ETag. There's also a Content-Type, which might be relevant, as it's possible a browser's caching strategy might be related to content type in the absence of other clues.

Are you yourself sending back the image from the server when the URL:

http://motocross.es/ajax/shop.ajax.original_pic.php?file=ref_44_1szyh6a9s5mh3ixc.jpg

...gets hit? i.e. is the server end your code as well? If so, try adding an appropriate Cache-Control header and a Content-Type. If you control the server, it's pretty much up to you how your images are cached by the browser.