4

我正在尝试使用从外部服务器加载的图像构建一个 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' );
        }
    });
});
4

1 回答 1

0

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

$.ajaxSetup ({
  cache: false
});
于 2012-09-06T08:36:03.427 回答