Image Lazy Loading

 var LazyLoad = function (elem) { this.elem = elem; this.render(); this.listen(); }; var LazyLoadStore = [];


 var scrolledIntoView = function (element) { var coords = element.getBoundingClientRect(); return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight)); };

 var LazyLoadSrc = function (img, callback) { img.src = img.getAttribute(data-LazyLoad); if (callback) { callback(); } };

 var removeLazyLoad = function (element, index) { if (LazyLoadStore.indexOf(element) !== -1) { LazyLoadStore.splice(index, 1); } };

 var LazyLoadImages = function () { for (var i = 0; i < LazyLoadStore.length; ) { var self = LazyLoadStore[i]; if (scrolledIntoView(self)) { LazyLoadSrc(self, removeLazyLoad(self, i)); continue; } i++; }

 LazyLoad.prototype = { init : function () { LazyLoadStore.push(this.elem); }, render : function () { if (document.addEventListener) { document.addEventListener(DOMContentLoaded, LazyLoadImages, false); } else { window.onload = LazyLoadImages; } }, listen : function () { window.onscroll = LazyLoadImages; } };

 var lazyImgs = document.querySelectorAll(img[data-LazyLoad]); for (var i = 0; i < lazyImgs.length; i++) { new LazyLoad(lazyImgs[i]).init(); }
var NaMooLazyLoad = new Class({initialize: function(){this.imgLoad = $$(.imgLoad);window.addEvent(scroll,this.echoImages.bind(this));this.echoImages();},action: function(a){var coords = a.getBoundingClientRect();return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight));},echoImages: function(){if(this.imgLoad.length!=0){this.imgLoad.each(function(el,i){if (this.action(el)) {el.set(src,el.get(data));this.imgLoad.erase(el);}},this);}}});