Skip to content

Instantly share code, notes, and snippets.

@jasonwaters

jasonwaters/deferImages.html

Created September 9, 2016 23:35
Show Gist options
  • Save jasonwaters/8f76d81c4fb8e9b7cd12cd9911f1000d to your computer and use it in GitHub Desktop.
Save jasonwaters/8f76d81c4fb8e9b7cd12cd9911f1000d to your computer and use it in GitHub Desktop.
Download ZIP
Jason's defer images solution
Raw
deferImages.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
</head>
<body>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9511/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9512/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9513/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9514/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9515/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9516/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9517/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9518/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9520/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9522/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9523/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9524/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9525/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9526/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9528/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9529/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9582/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9583/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9584/original.jpg?w=128"></p>
<p><img src="https://securecdn.disqus.com/uploads/mediaembed/images/509/9585/original.jpg?w=128"></p>
<script type="text/javascript">
var NO_AVATAR_SRC = 'http://mediacdn.disqus.com/1365023628/images/noavatar92.png';
var images = $('img');
for(var i=0;i<images.length;i++) {
var image = $(images[i]);
var origSrc = image.attr('src');
image.attr('data-origSrc', origSrc);
image.attr('src', NO_AVATAR_SRC);
}
function deferImages(loc) {
for(var i=0;i<images.length;i++) {
var image = $(images[i]);
if(image.offset().top < loc) {
image.attr('src', image.attr('data-origSrc'));
}
}
}
window.addEventListener('scroll', function(evt) {
var viewHeight = document.documentElement.clientHeight + window.scrollY;
deferImages(viewHeight);
});
deferImages(document.documentElement.clientHeight + window.scrollY);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment