giffffffffffs

gistfile1.html

<div class="image-gif-wrapper">
    <img class="lazy-load" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="600" data-src="https://assets.opennews.org/img/loops/gif-placeholder.png" rel:animated_src="https://assets.opennews.org/img/loops/Phenakistoscope_12.gif">
</div>

<script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/blazy/latest/blazy.min.js"></script>
<script src="https://assets.opennews.org/js/libgif_wtf.js"></script>

<style>
.jsgif {
    display: inline-block;
    position: relative;
}
.jsgif .play {
    display: inline-block;
    color: #fff;
    height: 36px;
    width: 36px;
    background-color: #888;
    text-align: center;
    line-height: 1.5;
    font-size: 24px;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -18px 0 0 -18px;
    opacity: .75;
    cursor: pointer;
}
@media screen and (max-width: 500px) {
    .jsgif {
        display: block;
    }
}
</style>
<script type="text/javascript">
// for mobile-ish browsers, we want to disable autoplay
// and decrease the proximity buffer for lazy loading
var browserWidth = document.documentElement.clientWidth;
var seemsWideEnough = browserWidth > 800;

function loadGif(e) {
    // load the gif into a canvas element for interactions
    var rub = new SuperGif({
        gif: e,
        draw_while_loading: seemsWideEnough,
        auto_play: seemsWideEnough
    });
    rub.load();

    // libgif's built-in `get_playing()` method seems
    // to always return `true`, so we'll use our own
    rub.isPlaying = seemsWideEnough;

    // grab this gif's canvas element
    var canvas = $(rub.get_canvas());
    // scale it in case of manual width adjustments
    var scaleWidth = (browserWidth < e.width) ? '100%' : e.width;
    canvas.width(scaleWidth);
    
    var playButton = $('<span class="play">&#9658;</span>');
    if (!seemsWideEnough) {
        playButton.insertAfter(canvas);
    }

    // catch taps for play/pause
    playButton.on('click', togglePlay);
    canvas.on('click', togglePlay);

    function togglePlay() {
        if (!rub.isPlaying) {
            rub.play();
            rub.isPlaying = true;
            playButton.remove();
        } else {
            rub.pause();
            rub.isPlaying = false;
            playButton.insertAfter(canvas);
        }
    }
}

var lazyLoad = new Blazy({ 
    selector: '.lazy-load',
    offset: (seemsWideEnough) ? 1000 : 500,
    container: '#snap-content-wrapper',
    success: function(e) {
        loadGif(e);
    }
});
</script>