如果我异步加载图片，Firefox标签页的加载图标会一直转动。

Question

因此我在我的数据库中获取图像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">&lsaquo;</a>
                   <a class="carousel-control right" href="#slideCarousel" data-slide="next">&rsaquo;</a>
                </div>

              </div> 
           </div>

- Jirico

---

您可以提供在进行任何jQuery调用之前的HTML（具有“hidden”类的HTML）吗？ - Dom

谢谢！我的初步想法是问题出在 .before() 上。当你将它改为 $('#slideCarousel').before('<div id="nav"></div>').carousel().removeClass('hidden'); 时，问题是否仍然存在？ - Dom

是的，问题仍然存在。我已经更新了Heroku以反映这个变化。谢谢你的尝试 :) - Jirico

嗯，好的，不好意思，但是这样怎么样...在DOM中，有以下内容：`<div id="slideshow"><div class="container_12"><div id="nav"></div>...然后 $('#slideCarousel').carousel().removeClass('hidden');`？ - Dom

没成功，我已经更新了Heroku应用程序，如果你想看的话。 - Jirico

Answer 1

经过一些测试，似乎是.on()事件引起了问题。使用此问题的被接受的答案，按照以下步骤进行：

//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');
 }

我还提供了一个演示，显示了一张损坏的图片：http://jsfiddle.net/dirtyd77/SLGdE/28/

- Dom

---

太棒了！那就是问题所在。Firefox对于on()事件处理不好。我已经更新了我的代码以反映您的更改，谢谢！ - Jirico

Answer 2

你正在使用WEBrick，问题可能出在这里，因为它没有准备好用于生产环境，你应该尝试在Gemfile中添加'thin'。

- eloyesp

---

我正在使用Heroku，我不认为他们在生产中使用WEBrick。 - Jirico

我也在使用Heroku，但他们只使用Gemfile上所写的内容。如果没有thin，他们就不会使用它。我还从Firebug中读取到了头文件，显示为WEBrick。 - eloyesp

这不是问题，但知道这一点很好。+1 - Jirico