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

Question

我的想法是显示一个冰块的图像，用户必须点击，然后才能显示冰块破碎。仅仅3秒后，冰块就会完全破碎，GIF完成（不是无限剪辑），然后页面会向下滚动到页面的"About"。这是我有 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

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

How to activate page-scroll after gif animation is complete

javascript

jquery

scroll

chaining

smooth-scrolling