So aktivieren Sie den Seiten-Scroll, nachdem die GIF-Animation beendet ist

Question

Meine Idee ist es, ein Bild eines Eiswürfels zu zeigen, auf den der Benutzer klicken muss, um dann den Eiswürfelbruch anzuzeigen. Nach nur 3 Sekunden ist der Eiswürfel vollständig aufgebrochen und die GIF ist fertig (es ist kein unendlicher Clip) und dann wird die Seite runter zum "About" der Seite scrollen. Dies ist der div, wo ich das Bild Eiswürfel haben:

<div class="row"> 
    <div class="col-lg-12 imageWrap page-scroll"> 
     <a href="#about"><img id="icebreaker" onclick="changeImg();" src="img/wiggle.gif"></a> 
     <p class="callToAction">Break The Ice</p> 
    </div> 
</div> 

Und der nächste Abschnitt eine id = #about, die sie bewegen sollte. Ich benutze das Bootstrap-Seiten-Scroll-Plugin, um das Glätten des Bildlaufs beim Klicken zu ermöglichen, aber was ich möchte, ist, dass das Smooth-Scroll nicht passiert, bis das GIF fertig abgespielt ist. Das folgende Skript soll meinen aktuellen Eiswürfel durch den brechenden Eiswürfel GIF ersetzen.

<script> 
    function changeImg() { 
     $("#icebreaker").attr("src", "img/ice-cube.gif"); 
    } 
</script> 

Ich habe versucht, die SetTimeout scroll verwenden, aber ich konnte es nicht zur Arbeit kommen, und ich habe versucht, die Seite für einige Sekunden zu brechen, bevor es gescrollt aber dann würde es die Animation als auch zu stoppen, da es bricht die ganze Seite. Wenn jemand mir helfen könnte, eine Art Kettenreaktion herauszufinden, wäre das großartig!

Answer 1

Versuchen Sie dieses

function changeImg() { 
 
    var img = document.getElementById("icebreaker"); 
 
    img.onload = function() { 
 
    setTimeout(function() { 
 
     /*your scroll fn here*/ 
 
    }, 5000) 
 
    } 
 
    img.src = "img/ice-cube.gif"; 
 
}

Die timeOut fn arbeitet müssen Sie jquery.ui.js als auch haben diese Check Arbeitsprobe hier

activate page scroll with timeout zu tun