Skip to content

Instantly share code, notes, and snippets.

@sumon-sarker

sumon-sarker/progressive-lazyload.html

Created December 18, 2019 04:30
Show Gist options
  • Save sumon-sarker/e0e07549383341dbacc1093259b1358a to your computer and use it in GitHub Desktop.
Save sumon-sarker/e0e07549383341dbacc1093259b1358a to your computer and use it in GitHub Desktop.
Download ZIP
Progressive JavaScript Image Lazy Load
Raw
progressive-lazyload.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Progressive Image lazy Loading</title>
<style>
ul{list-style: none;text-align: center;}
ul li{display: inline-block;}
.lazy-loader {
display : block;
opacity: 0.5;
height: 100px;
width: 200px;
transition: opacity 2s;
}
</style>
</head>
<body>
<ul class="card-list">
<li class="card">
<img class="lazy-loader" src="https://fakeimg.pl/200x100/282828/eae0d0" data-src="https://picsum.photos/id/700/5000/5000" alt="Eli DeFaria" />
</li>
<li class="card">
<img class="lazy-loader" src="https://fakeimg.pl/200x100/282828/eae0d0" data-src="https://picsum.photos/id/731/5000/5000" alt="Eli DeFaria" />
</li>
<li class="card">
<img class="lazy-loader" src="https://fakeimg.pl/200x100/282828/eae0d0" data-src="https://picsum.photos/id/732/5000/5000" alt="Eli DeFaria" />
</li>
<li class="card">
<img class="lazy-loader" src="https://fakeimg.pl/200x100/282828/eae0d0" data-src="https://picsum.photos/id/733/5000/5000" alt="Eli DeFaria" />
</li>
<li class="card">
<img class="lazy-loader" src="https://fakeimg.pl/200x100/282828/eae0d0" data-src="https://picsum.photos/id/735/5000/5000" alt="Eli DeFaria" />
</li>
<li class="card">
<img class="lazy-loader" src="https://fakeimg.pl/200x100/282828/eae0d0" data-src="https://picsum.photos/id/736/5000/5000" alt="Eli DeFaria" />
</li>
<li class="card">
<img class="lazy-loader" src="https://fakeimg.pl/200x100/282828/eae0d0" data-src="https://picsum.photos/id/737/5000/5000" alt="Eli DeFaria" />
</li>
<li class="card">
<img class="lazy-loader" src="https://fakeimg.pl/200x100/282828/eae0d0" data-src="https://picsum.photos/id/738/5000/5000" alt="Eli DeFaria" />
</li>
<li class="card">
<img class="lazy-loader" src="https://fakeimg.pl/200x100/282828/eae0d0" data-src="https://picsum.photos/id/739/5000/5000" alt="Eli DeFaria" />
</li>
<li class="card">
<img class="lazy-loader" src="https://fakeimg.pl/200x100/282828/eae0d0" data-src="https://picsum.photos/id/740/5000/5000" alt="Eli DeFaria" />
</li>
<li class="card">
<img class="lazy-loader" src="https://fakeimg.pl/200x100/282828/eae0d0" data-src="https://picsum.photos/id/741/5000/5000" alt="Eli DeFaria" />
</li>
<li class="card">
<img class="lazy-loader" src="https://fakeimg.pl/200x100/282828/eae0d0" data-src="https://picsum.photos/id/742/5000/5000" alt="Eli DeFaria" />
</li>
</ul>
<script>
// This is "probably" IE9 compatible but will need some fallbacks for IE8
// - (event listeners, forEach loop)
// wait for the entire page to finish loading
window.addEventListener('load', function() {
// setTimeout to simulate the delay from a real page load
setTimeout(lazyLoad, 1000);
});
function lazyLoad() {
/*Selecting all images for lazy loading*/
var images = document.querySelectorAll('.lazy-loader');
images.forEach(function(img) {
var src = img.getAttribute('data-src');
img.src = src;
img.addEventListener('load', function() {
setTimeout(function(){
img.style.opacity = '1';
},500);
});
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment