Skip to content

Instantly share code, notes, and snippets.

@webdesignberlin

webdesignberlin/vanilla-lazy-load.html

Forked from rposbo/vanilla-lazy-load.html
Created May 20, 2016 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save webdesignberlin/7667dffa91a3696b363f3d82c6406a80 to your computer and use it in GitHub Desktop.
Save webdesignberlin/7667dffa91a3696b363f3d82c6406a80 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
vanilla-lazy-load.html
<html>
<head>
<style>
.item {width:300px; display: inline-block; }
.item .itemtitle {font-weight:bold; font-size:2em;}
.hidden {display:none;}
</style>
</head>
<body>
<h1>Amalgam Comics Characters</h1>
<div id="listing">
<!-- first few items are loaded normally -->
<div class="item">
<img
src="http://static9.comicvine.com/uploads/scale_medium/0/229/305993-131358-dark-claw.jpg"
alt="Dark Claw"
width="300px" />
<span class="itemtitle">Dark Claw</span>
</div>
<div class="item">
<img
src="http://static6.comicvine.com/uploads/scale_super/3/31666/706536-supersoldier8.jpg"
alt="Super Soldier"
width="300px" />
<span class="itemtitle">Super Soldier</span>
</div>
<div class="item">
<img
src="http://static3.comicvine.com/uploads/scale_super/3/36899/732353-spidey.jpg"
alt="Spider Boy"
width="300px" />
<span class="itemtitle">Spider Boy</span>
</div>
<!-- everything after this is lazy -->
<div id="viewMore">
<a href="flatpage.html#more">View more</a>
</div>
<span id="nextPage" class="hidden">
<div class="item">
<img
src="http://spacergif.org/spacer.gif"
class="lazy"
data-src="http://vignette1.wikia.nocookie.net/amalgam/images/7/7c/Iron_Lantern.jpg/revision/latest?cb=20110828093145"
alt="Iron Lantern"
width="300px" />
<noscript>
<img
src="http://vignette1.wikia.nocookie.net/amalgam/images/7/7c/Iron_Lantern.jpg/revision/latest?cb=20110828093145"
alt="Iron Lantern"
width="300px" />
</noscript>
<span class="itemtitle">Iron Lantern</span>
</div>
<div class="item">
<img
src="http://spacergif.org/spacer.gif"
class="lazy"
data-src="http://static6.comicvine.com/uploads/scale_super/0/1867/583722-amalgam_amazon1.jpg"
alt="Amazon"
width="300px" />
<noscript>
<img
src="http://static6.comicvine.com/uploads/scale_super/0/1867/583722-amalgam_amazon1.jpg"
alt="Amazon"
width="300px" />
</noscript>
<span class="itemtitle">Amazon</span>
</div>
<div class="item">
<img
src="http://spacergif.org/spacer.gif"
class="lazy"
data-src="http://static4.comicvine.com/uploads/scale_super/0/1867/583727-bizarnage1.jpg"
alt="Bizarnage"
width="300px" />
<noscript>
<img
src="http://static4.comicvine.com/uploads/scale_super/0/1867/583727-bizarnage1.jpg"
alt="Bizarnage"
width="300px" />
</noscript>
<span class="itemtitle">Bizarnage</span>
</div>
<div class="item">
<img
src="http://spacergif.org/spacer.gif"
class="lazy"
data-src="http://static1.comicvine.com/uploads/scale_super/0/1867/583724-amcatsai1.jpg"
alt="Catsai"
width="300px" />
<noscript>
<img
src="http://static1.comicvine.com/uploads/scale_super/0/1867/583724-amcatsai1.jpg"
alt="Catsai"
width="300px" />
</noscript>
<span class="itemtitle">Catsai</span>
</div>
<div class="item">
<img
src="http://spacergif.org/spacer.gif"
class="lazy"
data-src="http://static4.comicvine.com/uploads/scale_super/0/1867/583743-moonwing1.jpg"
alt="Moonwing"
width="300px" />
<noscript>
<img
src="http://static4.comicvine.com/uploads/scale_super/0/1867/583743-moonwing1.jpg"
alt="Moonwing"
width="300px" />
</noscript>
<span class="itemtitle">Moonwing</span>
</div>
<div class="item">
<img
src="http://spacergif.org/spacer.gif"
class="lazy"
data-src="http://static5.comicvine.com/uploads/scale_super/0/1867/583739-hawkeyei.jpg"
alt="Hawkeye"
width="300px" />
<noscript>
<img
src="http://static5.comicvine.com/uploads/scale_super/0/1867/583739-hawkeyei.jpg"
alt="Hawkeye"
width="300px" />
</noscript>
<span class="itemtitle">Hawkeye</span>
</div>
<div class="item">
<img
src="http://spacergif.org/spacer.gif"
class="lazy"
data-src="http://static3.comicvine.com/uploads/scale_super/0/1867/583733-ammrcury1.jpg"
alt="Mercury"
width="300px" />
<noscript>
<img
src="http://static3.comicvine.com/uploads/scale_super/0/1867/583733-ammrcury1.jpg"
alt="Mercury"
width="300px" />
</noscript>
<span class="itemtitle">Mercury</span>
</div>
<div class="item">
<img
src="http://spacergif.org/spacer.gif"
class="lazy"
data-src="http://static2.comicvine.com/uploads/scale_super/0/1867/583737-drfate3.jpg"
alt="Dr. Strangefate"
width="300px" />
<noscript>
<img
src="http://static2.comicvine.com/uploads/scale_super/0/1867/583737-drfate3.jpg"
alt="Dr. Strangefate"
width="300px" />
</noscript>
<span class="itemtitle">Dr. Strangefate</span>
</div>
</span>
</div>
<script>
var lazy = [];
registerListener('load', setLazy);
registerListener('load', lazyLoad);
registerListener('scroll', lazyLoad);
registerListener('resize', lazyLoad);
function setLazy(){
document.getElementById('listing').removeChild(document.getElementById('viewMore'));
document.getElementById('nextPage').removeAttribute('class');
lazy = document.getElementsByClassName('lazy');
console.log('Found ' + lazy.length + ' lazy images');
}
function lazyLoad(){
for(var i=0; i<lazy.length; i++){
if(isInViewport(lazy[i])){
if (lazy[i].getAttribute('data-src')){
lazy[i].src = lazy[i].getAttribute('data-src');
lazy[i].removeAttribute('data-src');
}
}
}
cleanLazy();
}
function cleanLazy(){
lazy = Array.prototype.filter.call(lazy, function(l){ return l.getAttribute('data-src');});
}
function isInViewport(el){
var rect = el.getBoundingClientRect();
return (
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function registerListener(event, func) {
if (window.addEventListener) {
window.addEventListener(event, func)
} else {
window.attachEvent('on' + event, func)
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment