setInterval image is loading immediatly

Question

私が使用しているsetIntervalメソッドに応じて変更される画像を含むスライドショーを作成しました。以前は、しばらくページを離れて別のタブやウィンドウに移動してから戻ると、setIntervalのタイミングに問題がありました。私がページに戻ったときにスライドショーのタイミングが正しく流れない - 変更のタイミングがちょうど終わったため、jqueryの効果が間違ったタイミングで発生していた。

私は今、hasFocus条件を追加することで、その特定の問題を修正することができました。

しかし、私が今問題になっているのは、私がページに戻ったときに、スライドショーが置かれている画像がないということです。私は、インターバル機能に適用される6秒を待たなければならない。

ユーザーがウィンドウに戻ったときに、イメージの1つがページに常に表示されるようにするにはどうすればよいですか？

var bannerImages = [ 
 
     "banner1.jpeg", 
 
     "banner2.jpg", 
 
     "banner3.png" 
 
    ]; 
 
    
 
    var currentImage = 1; 
 
    
 
    $(".banner-img").fadeIn(500).delay(5000).fadeOut(); 
 
    
 
    setInterval(function(){ 
 
     if (currentImage > bannerImages.length-1){ 
 
     currentImage = 0; 
 
     } 
 

 
     if (document.hasFocus()) { 
 
     $(".banner-img").fadeIn().attr("src",bannerImages[currentImage]).delay(5000).fadeOut(); 
 
     currentImage++; 
 
     } 
 
    }, 6000)

<section id="banner"> 
 
    
 
     <div class="row"> 
 
     <div class="col-md-12"> 
 
      <img src="http://via.placeholder.com/350x150" class="img-responsive center-block banner-img"> \t 
 
     </div> 
 
     </div> 
 
    
 
    </section>

Answer 1

あなたのコードは、src属性を変更し、フェードアウトする前に終了するフェードインアニメーションを待ちません。

var bannerImages = [ 
    "banner1.jpeg", 
    "banner2.jpg", 
    "banner3.png" 
]; 

var currentImage = 1; 

//$(".banner-img").fadeIn(500).delay(5000).fadeOut(); //I don't think you need this. 

setInterval(function(){ 
    if (document.hasFocus()) { 
     $(".banner-img").fadeOut(100, function() { 
      $(".banner-img") 
       .attr("src", bannerImages[++currentImage % bannerImages.length]) 
       .fadeIn(100); 
     }); 
    } 
}, 6000); 

そのコールバック関数が何のためにあるのかについては、この記事を参照してください：私はこのように、少し異なるロジックを示唆 How to get jQuery to wait until an effect is finished?