我正在尝试使用从外部服务器加载的图片构建 jcarousel 滑块。这些图片以 ID 为名称保存为 GIF 格式: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' );
}
});
});