How to avoid the "blink" when exchanging gifs?

I am creating a website where when you scroll into an area, a gif appears. It only loops once; if you continue scrolling, it changes to another gif (which plays only once, too) If you scroll back, it changes to the first gif, restarting it so it can play again.

However, when the changing occurs, there is a blink that I do not want. Here is the fiddle. And here is the javascript:

$(window).ready(function() {
  var v = 0;

  $(window).on("scroll", function() {
    var scrollTop = $(this).scrollTop();

    if (scrollTop > 100 && scrollTop < 200) {

      if ($('#container').attr('data-img') != 'http://ift.tt/2adrjBf') {
        ++v;
        $('#container').attr('data-img', 'http://ift.tt/2adrjBf');
        $('#container').css('background-image', 'url(http://ift.tt/2apX2Cs' + v + ')');
      }

    } else if (scrollTop >= 200) {

      if ($('#container').attr('data-img') != 'http://ift.tt/2adr6yb') {
        ++v;
        $('#container').attr('data-img', 'http://ift.tt/2adr6yb');
        $('#container').css('background-image', 'url(http://ift.tt/2apXn8o' + v + ')');
      }

    } else {
      $('.imageHolder').css('background', 'blue');
    }

  });

});

I tried removing the ?v='+v+' from the background-image but then it won't load everytime it changes... Is there a way to keep the functioning as it is without the blinking?