Wie man das "Blinzeln" vermeidet, wenn Gifs ausgetauscht werden?

Question

Ich erstelle eine Website, auf der, wenn Sie in einen Bereich scrollen, ein gif erscheint. Es wird nur einmal durchlaufen; Wenn Sie mit dem Scrollen fortfahren, ändert sich die Anzeige in einen anderen gif (der auch nur einmal abgespielt wird). Wenn Sie zurückrollen, wird der erste gif angezeigt und neu gestartet, damit er erneut abgespielt werden kann.

Wenn jedoch die Änderung auftritt, gibt es ein Blinzeln, das ich nicht will. Hier ist die fiddle. Und hier ist die 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'); 
    } 

    }); 

}); 

Ich versuchte, die ?v='+v+' aus den background-image entfernen, aber dann wird es nicht geladen wird jedes Mal ändert ... Gibt es eine Möglichkeit, die Funktion zu halten, wie es ohne zu blinken ist?

Answer 1

Laden Sie das zweite Bild vor, das Blinken kommt von der Fernabrufzeit des Bildes. Wenn Sie zuvor dasselbe Bild an einer beliebigen Stelle auf dieser Website geladen haben, wird das neue Bild direkt aus dem Cache des Browsers geladen und ersetzt das vorherige Bild ohne sichtbaren Übergang.

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

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

}