title: setInterval issue with image not loading immediatly
body: <p>I have created a slideshow involving images which will change in accordance to the setInterval method I am using. Previously, I was having some issues with the timing of the setInterval whenever I would leave the page for a while, go to another tab or window, and then return. The slideshow timing would not flow correctly when I returned to the page - the timing of the changes were just off and as a result the jquery effects were firing at the wrong time as well.</p>
  
  <p>I have now managed to at least fix that particular issue due to adding a hasFocus condition.</p>
  
  <p>However, what I am finding to be the issue now, is that when I do return to the page, there is no image where the slideshow is placed. I have to wait the 6 seconds applied to the interval function.</p>
  
  <p>Any idea on how I can guarantee one of the images is always displayed on the page when the user returns to the window?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var bannerImages = [
        "banner1.jpeg",
        "banner2.jpg",
        "banner3.png"
      ];
      
      var currentImage = 1;
      
      $(".banner-img").fadeIn(500).delay(5000).fadeOut();
      
      setInterval(function(){
        if (currentImage &gt; bannerImages.length-1){
          currentImage = 0;
        }
  
        if (document.hasFocus()) {
          $(".banner-img").fadeIn().attr("src",bannerImages[currentImage]).delay(5000).fadeOut();
          currentImage++;
        } 
      }, 6000)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="banner"&gt;
      
        &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
            &lt;img src="http://via.placeholder.com/350x150" class="img-responsive center-block banner-img"&gt; 
          &lt;/div&gt;
        &lt;/div&gt;
      
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>