Question

I’m trying to build a jcarousel slider with images loaded from an external server. The images are saved as GIFs and named with an ID: 0001.gif, 0002.gif, 0010.gif, 0011.gif…etc. I want to display the first 99 images, but it turns out some images do not exist. In firefox, this is not a problem as it doesn’t have a “placeholder” for images that are not loaded. But for all other browsers the solution is to hide or remove the images that aren’t loaded. This seems to be working fine in Chrome and Safari, but in Firefox there’s a caching problem. My question is; How do 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 to use .ajax instead of .load, this gives you possibility to disable cache like this:

$.ajaxSetup ({
  cache: false
});