因此我在我的数据库中获取图像URL,通过AJAX获取数据,然后像这样加载图像:(更新以显示所有步骤)
//GET urls from server
$.get("/homeBanners", null, function(data){
$.each(data, function(i, banner){
console.log(i);
generateSlide(banner, i);
});
});
//Generate a slide for loaded URL
function generateSlide(banner, index){
var li = $('<li>').attr('data-target', '#slideCarousel').attr('data-slide-to', index);
var div = $('<div>').attr('class', 'item');
if(index == 0){
li.addClass('active');
div.addClass('active')
}
li.appendTo('.carousel-indicators');
div.appendTo('.carousel-inner');
var img = $('<img />').attr('src', banner.image_url).on('load', function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('broken image!');
} else {
//div.append(img);
img.appendTo(div);
//$('#slideCarousel').before('<div id="nav"></div>').carousel().removeClass('hidden');
$('#slideCarousel').carousel().removeClass('hidden');
}
});
}
代码运行正常,图片显示也正常。但在火狐浏览器中,标签页的加载指示符一直在转动。在Chrome中不会出现这个问题。如果我注释掉以下代码行:
// img.appendTo(div);
或者Bootstrap Carousel代码行:
> //$('#slideCarousel').before('<div id="nav">').carousel().removeClass('hidden');
旋转器停止了。所以我真的不知道为什么会发生这种情况。非常感谢任何帮助。
更新:
这发生在没有缓存时的第一次。 我正在使用Firefox 17。
轮播HTML代码:
<div id="slideshow">
<div class="container_12"><div id="nav"></div>
<div id="slideCarousel" class="grid_12 carousel slide hidden">
<ol class="carousel-indicators">
<!-- AJAX -->
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<!-- AJAX -->
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#slideCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#slideCarousel" data-slide="next">›</a>
</div>
</div>
</div>
.before()
上。当你将它改为$('#slideCarousel').before('<div id="nav"></div>').carousel().removeClass('hidden');
时,问题是否仍然存在? - Dom然后
$('#slideCarousel').carousel().removeClass('hidden');`? - Dom