So I get the image url in my database, get the data via AJAX and load the image like this: (Updated to show all steps)
//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');
}
});
}
The code runs fine, the image appears fine. But in firefox the tab loading spinner never stops. In chrome that problem doesn't happen.
If I comment the append line:
//img.appendTo(div);
or the Bootstrap Carousel line:
> //$('#slideCarousel').before('<div id="nav">').carousel().removeClass('hidden');
the spinner stops. So I really don't know why this is happening. I appreciate any help.
UPDATE:
It happens in the first time when there is no cache. I'm using Firefox 17.
The Carousel 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>
After some testing, it seems that the .on()
event is the culprit. Using the accepted answer from this question, do the following:
//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');
$('<img/>').error(function() { alert('broken image!'); })
.attr('src', banner.image_url)
.appendTo(div);
//$('#slideCarousel').before('<div id="nav"></div>').carousel().removeClass('hidden');
$('#slideCarousel').carousel().removeClass('hidden');
}
I have also provided a demo showing a broken image: http://jsfiddle.net/dirtyd77/SLGdE/28/
You are using WEBrick, the problem may be there given it's not prepared to be used on a production, you should try adding 'thin' to the Gemfile
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With