gif动画完成后如何激活页面滚动

Question

我的想法是显示一个冰块的图像，用户必须点击它，然后才显示冰块破裂。仅仅 3 秒后，冰块将完全破碎，GIF 完整（不是无限剪辑），然后页面将向下滚动到页面的“关于”。 这是我拥有 Ice Cube 图片的 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

试试这个

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

timeOut fn 正在工作 你还需要有 jquery.ui.js 才能做到这一点 在这里检查工作样本

activate page scroll with timeout