如何在交換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() { 
     /* ... */ 
    } 

}