Question

我正在尝试使用从外部服务器加载的图像构建jcarousel滑块。图像保存为GIF，并以ID：0001.gif，0002.gif，0010.gif，0011.gif等命名。我想显示前99个图像，但事实证明一些图像不存在。在firefox中，这不是问题，因为它没有“占位符”表示未加载的图像。但对于所有其他浏览器，解决方案是隐藏或删除未加载的图像。这似乎在Chrome和Safari中运行良好，但在Firefox中有一个缓存问题。我的问题是;我该如何避免这种情况？

$(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

您可以尝试使用.ajax而不是.load，这样您就可以像这样禁用缓存：

$.ajaxSetup ({
  cache: false
});

jQuery .load（）函数缓存

1 个答案: