10

したがって、データベースで画像の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では、タブ読み込みスピナーが停止することはありません。クロムでは、その問題は発生しません。

追加行にコメントすると：

//img.appendTo(div）;

またはブートストラップカルーセルライン：

> //$('#slideCarousel').before('<div id="nav">').carousel().removeClass('hidden');

スピナーが停止します。だから私は本当にこれが起こっている理由を知りません。助けていただければ幸いです。

アップデート：

キャッシュがない場合に初めて発生します。Firefox17を使用しています。

カルーセル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>
4

2 に答える 2

2

いくつかのテストの後、.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/

于 2013-03-15T18:13:57.970 に答える
1

WEBrickを使用していますが、本番環境で使用する準備ができていない場合は問題が発生する可能性があります。に「thin」を追加してみてくださいGemfile。

于 2013-03-15T17:56:24.957 に答える