title: How to avoid the "blink" when exchanging gifs?
body: <p>I am creating a website where when you scroll into an area, a <code>gif</code> appears. It only loops once; if you continue scrolling, it changes to another <code>gif</code> (which plays only once, too) If you scroll back, it changes to the first <code>gif</code>, restarting it so it can play again.</p>
  
  <p>However, when the changing occurs, there is a blink that I do not want. Here is the <a href="https://jsfiddle.net/qynvg44b/14/" rel="nofollow">fiddle</a>. And here is the <code>javascript</code>:</p>
  
  <pre><code>$(window).ready(function() {
    var v = 0;
  
    $(window).on("scroll", function() {
      var scrollTop = $(this).scrollTop();
  
      if (scrollTop &gt; 100 &amp;&amp; scrollTop &lt; 200) {
  
        if ($('#container').attr('data-img') != 'http://i.imgur.com/Hhmt8.gif') {
          ++v;
          $('#container').attr('data-img', 'http://i.imgur.com/Hhmt8.gif');
          $('#container').css('background-image', 'url(http://i.imgur.com/Hhmt8.gif?v=' + v + ')');
        }
  
      } else if (scrollTop &gt;= 200) {
  
        if ($('#container').attr('data-img') != 'http://i.imgur.com/TUAwA.gif') {
          ++v;
          $('#container').attr('data-img', 'http://i.imgur.com/TUAwA.gif');
          $('#container').css('background-image', 'url(http://i.imgur.com/TUAwA.gif?v=' + v + ')');
        }
  
      } else {
        $('.imageHolder').css('background', 'blue');
      }
  
    });
  
  });
  </code></pre>
  
  <p>I tried removing the <code>?v='+v+'</code> from the <code>background-image</code> but then it won't load everytime it changes... Is there a way to keep the functioning as it is without the blinking?</p>