JQuery.load () function cache

Question

I am trying to create a jcarousel slider with images downloaded from an external server. Images are saved as GIFs and named with ID: 0001.gif, 0002.gif, 0010.gif, 0011.gif ... etc. I want to display the first 99 images, but it turns out that some images do not exist. In firefox, this is not a problem since it does not have a placeholder for images that are not uploaded. But for all other browsers, the solution is to hide or remove images that are not uploaded. It seems to work fine in Chrome and Safari, but there is a caching issue in Firefox. My question is: How can I avoid this?

$(document).ready(function(){ for(var i = 0; i < 99; i++){ // Append images 1-9 to #items if(i < 10){ $('#items').append('<li class="item" id="' + i + '"><a href="http://www.fagpressen.no/id/3653?magazine=000' + i + '"><img id="' + i + '" src="http://katalogen2012.fagpressen.no/blader/forside/forside000' + i + '.gif"></a></li>'); } // Append images 10 - 99 to #items if(i >=10 && i <= 99){ $('#items').append('<li class="item" id="' + i + '"><a href="http://www.fagpressen.no/id/3653?magazine=00' + i + '"><img id="' + i + '" src="http://katalogen2012.fagpressen.no/blader/forside/forside00' + i + '.gif"></a></li>'); } } // Remove empty images var len = $('.item').find('img').length; $('.item').find('img').each(function(i){ var img = $( this ), itemId = $(this).attr("id"); img.error( function () { var elem = $(this); elem.parents('li').remove(); if (i + 1 === len) { startCarousel(); } }).load( function () { if (i + 1 === len) { startCarousel(); } }); if ( img.width() > 0 ) { img.trigger( 'load' ); } }); }); 

Answer 1

You can try using .ajax instead of .load, this gives you the option to disable the cache as follows:

 $.ajaxSetup ({ cache: false });