如何激活gif動畫完成後的頁面滾動

我的想法是顯示一個冰塊的圖像，使用必須點擊，然後顯示冰塊破碎。僅需3秒鐘，冰塊將完全破碎，GIF完成（不是無限的剪輯），然後頁面向下滾動到頁面的「關於」。這是我有冰塊的圖像股利：如何激活gif動畫完成後的頁面滾動

<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的滾動嘗試，但我無法得到它的工作，我已經嘗試過打破了網頁幾秒鐘它滾動之前，但隨後將停止動畫，以及因爲它打破整個頁面。如果任何人都可以幫助我找出某種連鎖反應，那會很棒！

來源

2016-11-15 Haley

試試這個

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

超時FN工作你需要有jquery.ui.js以及爲此檢查工作在這裏樣品

activate page scroll with timeout

來源

2016-11-15 01:05:40 RizkiDPrast

我試着圍繞頁面滾動功能包裹它，但它sti我不會工作。我正在使用此鏈接中的滾動函數來使用setTimeout（function（）{... https://github.com/BlackrockDigital/startbootstrap-scrolling-nav/blob/master/js/scrolling-nav。 js – Haley

我更新了答案，請查看代碼 – RizkiDPrast

非常感謝！ – Haley

如何激活gif動畫完成後的頁面滾動

回答

相關問題