Question

I have a jquery slideshow and built a pre-load function:

function preload_images(){
var pre_image = curr_img - 1;
if(pre_image < 0) pre_image = (tot_elements-1);

var curr_obj = 0;

if(!$('#img_preloaded_'+pre_image).length > 0){
    curr_obj = slideshow[pre_image];
    $('.preload_left').append('<img src="'+curr_obj["img_url"]+'" id="img_preloaded_'+pre_image+'" class="preload_box" />');
}

var pre_image = curr_img + 1;
if(tot_elements==pre_image) pre_image = 0;
if(!$('#img_preloaded_'+pre_image).length > 0){
    curr_obj = slideshow[pre_image];
    $('.preload_right').append('<img src="'+curr_obj["img_url"]+'" id="img_preloaded_'+pre_image+'" class="preload_box" />');
}

Everything works great in Firefox – images are cached when loaded – but the images are not cached in Chrome or Safari for some reason. You can see that in FF, Chrome and Safari the images load into the document to the left of the slideshow, but they don’t cache. The slideshow re-loads them except for in FF because the image is already cached in FF.

https://www.assembla.com/code/cfrepo/subversion/node/blob/trunk/index.html#image=CrossFire
http://jsfiddle.net/doobada/9m9eq/

Any thoughts?

Answer 1

Ok, it looks like Chrome and other browsers have their own default for cache-expires. To fix this problem I needed to pre-load the images in the slideshow set and then change the expires. It was only working in Firefox properly until I edited the .htaccess file so that chrome does not give it’s default expiry:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Expires "Thu, 15 Jan 2015 20:00:00 GMT" </FilesMatch>