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');
    }

  });

});

我尝试从?v='+v+'移除background-image，但每次更改时都不会加载...有没有办法保持功能不闪烁？< / p>

Answer 1

预加载第二张图像，闪烁来自图像的远程抓取时间。如果您之前在此网站上的任何位置预先加载了相同的图像，则新图像将直接从浏览器的缓存加载，并将替换之前的图像，而不会发生任何可见的转换。

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

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

}

如何避免＆＃34;眨眼＆＃34;交换GIF时？

1 个答案: