Lack of caching dynamically loaded images in Google Chrome

Question

Images uploaded using jQuery not saved in Google Chrome cache? It is downloaded from the server every time.

SITUATION: I am using jQuery slimbox2 to upload the image to the lightbox. Nothing special at the moment. I added some jQuery code that detects when the mouse cursor moves over the lightbox image: when this happens, I dynamically load the version of the lightbox image, but more (for example, scaling), changing the background of the css div.

PROBLEM: When the cursor goes to the lightbox for the first time, it should load the “large” image, and with all browsers the image is stored in the cache, therefore, when the cursor goes blank, and the second time the “large” image is already loaded, therefore it does not need to be downloaded this second or 1 second.

In Chrome, it loads over and over again, every time. (There are even more problems because the mousein mouseout event in the lightbox splitting layers does this extra load = displaying the image all the time [image loading]).

EXAMPLE: My English is pretty cruel and it is 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

I believe this is because the headers sent with your image do not say anything about caching it. By this I mean that your image url is:

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

... serves for an 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 does not say how the image should be cached. Compare this, for example, with the main, 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 additional caching instructions? There is a Cache-Control header there, which is probably an important bit, as well as other caching information such as ETag. There is also a Content-Type , which may be relevant, as the browser caching strategy may be related to the type of content in the absence of other hints.

You yourself send the image from the server when the URL:

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

... gets hit? that is, the server is ending your code? If so, try adding the appropriate Cache-Control and Content-Type header. If you manage the server, it largely depends on how your images are cached by the browser.

Answer 2

try to save them in local storage 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="" />