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');
        }
    });
});

我试图显示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');
}

动画gif开始滚动

1 个答案: