javascript - 交换gif时如何避免出现 "blink"？

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 () {
       /* ... */
   }

}