Animated gif starting on scroll

Question

I have made 4 animated gifs and i want them to start by the user's scroll.

What i did is use this:

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

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

I tried to display none and block the gifs by scroll and it works good, the problem is that the gif doesnt start from the beginning when i display block it, it starts from somewhere in the middle of the animation.

how can i make a gif start exactly from the first frame when i display block it?

Thanks very much!

Answer 1

Your code does hide and show the images but it does not reload the image. Instead you should update your src attribute, or simple realod the same image.

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