GIFアニメーションが完了した後でページスクロールを有効にする方法

Question

私の考えは、クリックする必要があるアイスキューブの画像を表示し、アイスキューブの破損を表示することです。わずか3秒後にアイスキューブが完全に壊れ、GIFが完成します（これは無限のクリップではありません）。ページはページの "About"までスクロールします。 これは私がアイスキューブイメージを持っているdiv要素である：

<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

試してみてください、この1

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

タイムアウトFNは、ここでこの チェックワーキングサンプル

activate page scroll with timeoutを行うには、同様jquery.ui.jsを持っている必要があります を働いています