Question

我创建了一个涉及图像的幻灯片，这些图片将根据我正在使用的setInterval方法进行更改。以前，每当我离开页面一段时间，转到另一个选项卡或窗口，然后返回时，我遇到了setInterval的时间问题。当我返回页面时，幻灯片放映时间不会正确流动 - 更改的时间刚刚关闭，因此jquery效果也在错误的时间触发。

由于添加了一个hasFocus条件，我现在设法至少解决了这个问题。

然而，我现在发现的问题是，当我返回页面时，没有放置幻灯片放映的图像。我必须等待6秒应用于间隔功能。

当用户返回窗口时，有关如何保证其中一个图像的任何想法总是显示在页面上？

＆＃13;

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)

＆＃13;

<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">	
        </div>
      </div>
    
    </section>

＆＃13;

setInterval问题，图像无法立即加载

0 个答案: