如果我异步加载图像，Firefox 选项卡加载微调器将永远运行

Posted 2023-02-22

【中文标题】如果我异步加载图像，Firefox 选项卡加载微调器将永远运行

【英文标题】：Firefox tab loading spinner runs forever if I load a image asynchronously

【发布时间】：2013-03-04 03:09:38

【问题描述】：

所以我在我的数据库中获取图像 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');
        
    );

 

代码运行良好，图像显示良好。但在 Firefox 中，选项卡加载微调器永远不会停止。在 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>

【问题讨论】：

你能在任何 jQuery 调用之前提供 html 吗（所以有 hidden 类的 html）？

当然，我更新了我的问题。

谢谢！好吧，我最初的想法是问题出在.before() 上。改成：$('#slideCarousel').before('<div id="nav"></div>').carousel().removeClass('hidden');后问题是否依然存在？

是的，问题仍然存在。我更新了 Heroku 以反映变化。感谢您的尝试:)

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

【参考方案1】：

经过一些测试，似乎.on() 事件是罪魁祸首。使用来自this question 的已接受答案，执行以下操作：

//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/

【讨论】：

太棒了！这就是问题所在。 Firefox 不能很好地处理 on() 事件。我更新了我的代码以反映您的更改，谢谢！

【参考方案2】：

您正在使用 WEBrick，可能存在问题，因为它还没有准备好用于制作，您应该尝试将“thin”添加到Gemfile。

【讨论】：

我正在使用 Heroku 我不认为他们使用 WEBrick 进行生产。

我也在使用heroku，但他们使用他们拥有的东西，而且他们只有Gemfile上写的东西。如果它不存在，他们就不会使用薄。我也是从萤火虫那里读到的，标题是 WEBrick。

这不是问题，但很高兴知道这一点。 +1