Skip to content

Instantly share code, notes, and snippets.

@ryanpitts
Last active August 29, 2015 14:22
Show Gist options
  • Save ryanpitts/5d3767bcf67ad724b9f3 to your computer and use it in GitHub Desktop.
Save ryanpitts/5d3767bcf67ad724b9f3 to your computer and use it in GitHub Desktop.
giffffffffffs
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment