从滚动开始的动画 gif

Question

我制作了 4 个动画 gif，我希望它们从用户的滚动开始。

我所做的是使用这个：

$(function () {
    var screen = $(".screen");
    $(window).scroll(function () {
        var scroll = $(window).scrollTop();

        if (scroll >= 1500) {
            screen.css('display','block');
        } else {
            screen.css('display','none');
        }
    });
});

我尝试不显示任何内容并通过滚动阻止 gif，效果很好，问题是当我显示阻止时 gif 不是从头开始，它是从动画中间的某个地方开始的。

当我显示块时，如何使 gif 完全从第一帧开始？

非常感谢！

Answer 1

您的代码会隐藏和显示图像，但不会重新加载图像。相反，您应该更新您的 src 属性，或者简单地重新分配相同的图像。

$(this).attr("src",$(this).attr("src"))

One simple solution would be 

if (scroll >= 1500) {
   screen.attr('src',screen.attr('src')); // update its src, this reloads the img
} else {
   screen.css('display','none');
}