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.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.