Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Lazy
/* lazyload.js (c) Xander Dumaine
* MIT License (http://www.opensource.org/licenses/mit-license.html)
*
* Adapted from https://css-tricks.com/snippets/javascript/lazy-loading-images/
*
* expects a bunch of
* `<img src="blank.gif" data-src="my_image.png">`
*/
!function (window) {
var $q = function (query, result) {
if (document.querySelectorAll) {
res = document.querySelectorAll(query);
} else {
var styleSheet = document.styleSheets[0] ||
document.createStyleSheet();
styleSheet.addRule(query, 'f:b');
for (var i = 0; i < document.all.length; i++) {
document.all[i].currentStyle.f && result.push(document.all[i]);
}
styleSheet.removeRule(0);
}
return res;
};
var addEventListener = function (evt, fn) {
var elementToAttach = window;
if (elementToAttach.addEventListener) {
elementToAttach.addEventListener(evt, fn, false)
} else if (elementToAttach.attachEvent) {
elementToAttach.attachEvent('on' + evt, fn)
} else {
elementToAttach['on' + evt] = fn;
}
};
var _has = function (obj, key) {
return Object.prototype.hasOwnProperty.call(obj, key);
};
function loadImage (el, fn) {
var img = new Image();
var src = el.getAttribute('data-src');
img.onload = function() {
if (!!el.parent) {
el.parent.replaceChild(img, el);
} else {
el.src = src;
}
if (typeof fn === 'function') {
fn();
}
}
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();
var query = $q('img[data-src]');
var 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);
!function(e){function t(e,t){var n=new Image,r=e.getAttribute("data-src");n.onload=function(){e.parent?e.parent.replaceChild(n,e):e.src=r,"function"==typeof t&&t()},n.src=r}function n(t){var n=t.getBoundingClientRect();return n.top>=0&&n.left>=0&&n.top<=(e.innerHeight||document.documentElement.clientHeight)}for(var r=function(e,t){if(document.querySelectorAll)res=document.querySelectorAll(e);else{var n=document.styleSheets[0]||document.createStyleSheet();n.addRule(e,"f:b");for(var r=0;r<document.all.length;r++)document.all[r].currentStyle.f&&t.push(document.all[r]);n.removeRule(0)}return res},c=function(t,n){var r=e;r.addEventListener?r.addEventListener(t,n,!1):r.attachEvent?r.attachEvent("on"+t,n):r["on"+t]=n},o=new Array,l=r("img[data-src]"),u=function(){for(var e=0;e<o.length;e++)n(o[e])&&t(o[e],function(){o.splice(e,e)})},a=0;a<l.length;a++)o.push(l[a]);u(),c("scroll",u)}(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.