public
Last active

lazy loader

  • Download Gist
demo.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='lazyload.js'></script>
<style type='text/css'>
body {
padding-top: 700px;
}
 
img {
display: block;
margin: 0 auto;
}
 
img.lazy {
opacity: 0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
}
img.lazy.loaded {
opacity: 1;
}
 
</style>
</head>
<body>
<img src="blank.gif" data-src="http://lorempixel.com/400/200/animals/1" width="400" height="200" class="lazy">
<br>
<img src="blank.gif" data-src="http://lorempixel.com/400/200/animals/2" width="400" height="200" class="lazy">
<br>
<img src="blank.gif" data-src="http://lorempixel.com/400/200/animals/3" width="400" height="200" class="lazy">
<br>
<img src="blank.gif" data-src="http://lorempixel.com/400/200/animals/4" width="400" height="200" class="lazy">
</body>
</html>
lazy.css
CSS
1 2 3 4 5 6 7 8 9 10
img.lazy {
opacity: 0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
}
img.lazy.loaded {
opacity: 1;
}
lazyload.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
/* lazyload.js (c) Lorenzo Giuliani
* MIT License (http://www.opensource.org/licenses/mit-license.html)
*
* expects a list of:
* `<img src="blank.gif" data-src="my_image.png" width="600" height="400" class="lazy">`
*/
 
!function(){
var $q = function(q, res){
if (document.querySelectorAll) {
res = document.querySelectorAll(q);
} else {
var d=document
, a=d.styleSheets[0] || d.createStyleSheet();
a.addRule(q,'f:b');
for(var l=d.all,b=0,c=[],f=l.length;b<f;b++)
l[b].currentStyle.f && c.push(l[b]);
 
a.removeRule(0);
res = c;
}
return res;
}
, addEventListener = function(evt, fn){
window.addEventListener
? this.addEventListener(evt, fn, false)
: (window.attachEvent)
? this.attachEvent('on' + evt, fn)
: this['on' + evt] = fn;
}
, _has = function(obj, key) {
return Object.prototype.hasOwnProperty.call(obj, key);
}
;
 
function loadImage (el, fn) {
var img = new Image()
, src = el.getAttribute('data-src');
img.onload = function() {
el.src = src;
 
el.className = el.getAttribute('class') + " loaded";
 
fn? fn() : null;
}
img.src = src;
}
 
function elementInViewport(el) {
var rect = el.getBoundingClientRect()
 
return (
rect.top >= 0
&& rect.left >= 0
&& rect.top <= (window.innerHeight || document.documentElement.clientHeight)
)
}
 
addEventListener('load', function(){
var images = new Array()
, query = $q('img.lazy')
, processScroll = function(){
for (var i = 0; i < images.length; i++) {
if (elementInViewport(images[i])) {
loadImage(images[i], function () {
images.splice(i, i);
});
}
};
}
;
// Array.prototype.slice.call is not callable under our lovely IE8
for (var i = 0; i < query.length; i++) {
images.push(query[i]);
};
 
processScroll();
addEventListener('scroll',processScroll);
});
}();

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.