Created
November 9, 2012 08:35
-
-
Save Macagare/4044474 to your computer and use it in GitHub Desktop.
Javascript: Lazy Loading Images
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
ressource: http://css-tricks.com/snippets/javascript/lazy-loading-images/?utm_source=dlvr.it&utm_medium=twitter | |
*/ | |
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a> | |
/* 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(window){ | |
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() { | |
if (!! el.parent) | |
el.parent.replaceChild(img, el) | |
else | |
el.src = src; | |
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) | |
) | |
} | |
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); | |
}(this); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment