How to replay a GIF with jQuery

While you can’t pause, play or scrub an animated GIF like you can a video you can at least play it from the beginning. A simple way, with jQuery, is to simply remove the src attribute and re-add it like this:

function replayGIF($img) {

    if ($img.length === 1 && $img.prop('tagName').toLowerCase() == 'img') {

        $img.data('src', $img.attr('src'))
            .attr('src', '')
            .attr('src', $img.data('src'));

    }

}

The usage would be something like replayGIF($('img.gif')).eq(0). In my case I only wanted to do individual images so that is how the function is set up. It can easily be adapted so you can select as many images as you like and pass them in one go instead.

Note that some functions handle this by adding a unique token to the src instead but this forces the GIF to reload from the server, making it a waste of bandwidth.