Skip to content

Instantly share code, notes, and snippets.

@rposbo

rposbo/vanilla-lazy-load.html

Last active January 3, 2023 09:01
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save rposbo/f4330791e7727c6fd2cc to your computer and use it in GitHub Desktop.
Save rposbo/f4330791e7727c6fd2cc 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="https://comicvine.gamespot.com/a/uploads/scale_small/0/229/305994-84919-dark-claw.jpg"
alt="Dark Claw"
width="300px" />
<span class="itemtitle">Dark Claw</span>
</div>
<div class="item">
<img
src="https://comicvine.gamespot.com/a/uploads/scale_small/0/3664/806882-x1.jpg"
alt="Super Soldier"
width="300px" />
<span class="itemtitle">Super Soldier</span>
</div>
<div class="item">
<img
src="https://comicvine.gamespot.com/a/uploads/scale_small/6/68065/7058388-spiderboy0.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="https://comicvine.gamespot.com/a/uploads/scale_small/8/80523/1520527-amazon2cl4.jpg"
alt="Amazon"
width="300px" />
<noscript>
<img
src="https://comicvine.gamespot.com/a/uploads/scale_small/8/80523/1520527-amazon2cl4.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="https://comicvine.gamespot.com/a/uploads/scale_small/0/8056/348302-52652-doctor-doomsday.jpg"
alt="Doctor Doomsday"
width="300px" />
<noscript>
<img
src="https://comicvine.gamespot.com/a/uploads/scale_small/0/8056/348302-52652-doctor-doomsday.jpg"
alt="Doctor Doomsday"
width="300px" />
</noscript>
<span class="itemtitle">Doctor Doomsday</span>
</div>
<div class="item">
<img
src="http://spacergif.org/spacer.gif"
class="lazy"
data-src="https://comicvine.gamespot.com/a/uploads/scale_small/2/26751/516993-catsai.jpg"
alt="Catsai"
width="300px" />
<noscript>
<img
src="https://comicvine.gamespot.com/a/uploads/scale_small/2/26751/516993-catsai.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="https://comicvine.gamespot.com/a/uploads/scale_small/1/14607/332382-66823-moon-knight.jpg"
alt="Moonwing"
width="300px" />
<noscript>
<img
src="https://comicvine.gamespot.com/a/uploads/scale_small/1/14607/332382-66823-moon-knight.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="https://comicvine.gamespot.com/a/uploads/scale_small/3/38919/971427-speed_demon.jpg"
alt="Speed Demon"
width="300px" />
<noscript>
<img
src="https://comicvine.gamespot.com/a/uploads/scale_small/3/38919/971427-speed_demon.jpg"
alt="Speed Demon"
width="300px" />
</noscript>
<span class="itemtitle">Speed Demon</span>
</div>
<div class="item">
<img
src="http://spacergif.org/spacer.gif"
class="lazy"
data-src="https://comicvine.gamespot.com/a/uploads/scale_small/1/15921/398228-114420-mercury.jpg"
alt="Mercury"
width="300px" />
<noscript>
<img
src="https://comicvine.gamespot.com/a/uploads/scale_small/1/15921/398228-114420-mercury.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="https://comicvine.gamespot.com/a/uploads/scale_small/0/3853/195688-181966-dr-strangefate.jpg"
alt="Dr. Strangefate"
width="300px" />
<noscript>
<img
src="https://comicvine.gamespot.com/a/uploads/scale_small/0/3853/195688-181966-dr-strangefate.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