Как активировать прокрутку страницы после завершения анимации gif

Question

Моя идея - показать изображение кубика льда, которое должно щелкнуть, только чтобы показать, как сломается кубик льда. Через 3 секунды кубик льда будет полностью сломан, а GIF будет завершен (это не бесконечный клип), а затем страница прокрутится вниз до «О» страницы. Это ДИВ, где у меня есть Ice Cube изображение:

<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> 

И следующий раздел имеет ID = #about который он должен выберите. Я использую плагин для прокрутки страницы Bootstrap, чтобы плавное прокручивание появлялось при щелчке, но я хочу, чтобы плавная прокрутка не выполнялась до тех пор, пока GIF не будет воспроизводиться. Следующий сценарий должен заменить мой текущий кубик льда сломанным кубиком льда GIF.

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

Я попытался с помощью SetTimeout прокрутки, но я не мог заставить его работать, и я попытался разорвать страницу на несколько секунд, прежде чем он прокручивается, но тогда это было бы остановить анимацию, а так как он ломает всю страницу. Если кто-то может помочь мне разобраться в какой-то цепной реакции, это было бы здорово!

Answer 1

Попробуйте один

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

тайм-аут сноска работает вам нужно иметь jquery.ui.js, а сделать это проверки рабочий образец здесь

activate page scroll with timeout