gifを交換する際の「点滅」を避けるにはどうすればよいですか？

Question

私は、あなたがエリアにスクロールすると、gifが現れるウェブサイトを作成しています。それは一回だけループします。スクロールを続けると別のgifに変わります（1回だけ再生されます）。スクロールすると最初のgifに変わり、再開できるように再開します。

しかし、変更が発生すると、私は欲しくない点滅があります。ここにはfiddleがあります。そして、ここで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://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 >= 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'); 
    } 

    }); 

}); 

私はbackground-imageから?v='+v+'を削除しようとしたが、その後、それが変わるたびにロードされません...それは点滅せずにそのままの機能を維持する方法はありますか？

Answer 1

2番目のイメージを事前にロードします。点滅は、イメージのリモート取得時間から得られます。以前このウェブサイト上の任意の場所に同じ画像をプリロードしていた場合、新しい画像はブラウザのキャッシュから直接ロードされ、目に見える変化なしに前の画像に置き換えられます。

$(window).ready(function() { 
    var v = 0; 
    var image = new Image(); 
    image.src = 'http://i.imgur.com/TUAwA.gif'; 

    $(window).on("scroll", function() { 
     /* ... */ 
    } 

}