Firefox tab loading spinner runs forever if I load a image asynchronously

Question

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">&lsaquo;</a>
                   <a class="carousel-control right" href="#slideCarousel" data-slide="next">&rsaquo;</a>
                </div>

              </div> 
           </div>

Can you provide the html before any jQuery calls are made (so the html that has `hidden` class)? — Dom, Mar 15 '13 at 15:33
Thank you! Well my initial thought is that the problem lies with the [`.before()`](http://api.jquery.com/before/). Does the problem still occur when you change it to: `$('#slideCarousel').before('
').carousel().removeClass('hidden');`? — Dom, Mar 15 '13 at 17:06
Yes, the problem still occur. I updated Heroku to reflect the change. Thanks for the try :) — Jirico, Mar 15 '13 at 17:16
Hmm, okay sorry but how about this... in the DOM, have the following: `

...` then `$('#slideCarousel').carousel().removeClass('hidden');`? — Dom, Mar 15 '13 at 17:19
Didn't work, I updated the Heroku app with your changes if you want to see. — Jirico, Mar 15 '13 at 17:39
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/26260/discussion-between-dom-and-jirico) — Dom, Mar 15 '13 at 17:53

score 2 · Accepted Answer · edited May 23 '17 at 11:57

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/

Awesome! That was the problem. Firefox doesn't deal well with the on() event. I updated my code to reflect your changes, thanks! — Jirico, Mar 15 '13 at 18:19

score 1 · Answer 2 · answered Mar 15 '13 at 17:56

1

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.

answered Mar 15 '13 at 17:56

eloyesp

3,135
1
32
47

I'm using Heroku I don't think they use WEBrick for production. – Jirico Mar 15 '13 at 18:04
1

I'm also using heroku, but they use what they have, and they only have what is written on the Gemfile. They do not use thin if it's not there. I readed it from firebug also, the headers says WEBrick. – eloyesp Mar 15 '13 at 18:39
This was not the problem but it's nice to know this. +1 – Jirico Mar 15 '13 at 19:01

Firefox tab loading spinner runs forever if I load a image asynchronously

2 Answers2