交换gif时如何避免“眨眼”？

Question

我正在创建一个网站，当您滚动到某个区域时，会出现 gif。它只循环一次；如果你继续滚动，它会变成另一个gif（也只播放一次）如果你往回滚动，它会变成第一个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

预加载第二张图片，闪烁来自图片的远程抓取时间。如果您之前在本网站的任何位置预加载了相同的图像，新图像将直接从浏览器的缓存中加载，并且将替换之前的图像而没有任何可见的过渡。

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

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

}