LazyLoad rewrite - simple - all items

by amindunited

HTML

<button href="javascript:loadEm()">LoadEm</button>
<ul id="imageList">
    <li><img class="lazy" id="lazy_1" src="img/grey.gif" data-src="http://lh3.ggpht.com/-CmrdcKmSmYg/UMPKIKjbxPI/AAAAAAAAAec/P8z-QxG9OYI/%25255BUNSET%25255D.jpg" width="100" heigh="100"></li>
        
    
<li><img class="lazy" src="img/grey.gif" data-original="http://lh3.ggpht.com/-CmrdcKmSmYg/UMPKIKjbxPI/AAAAAAAAAec/P8z-QxG9OYI/%25255BUNSET%25255D.jpg" width="100" heigh="100"></li><li><img class="lazy" src="img/grey.gif" data-original="http://lh3.ggpht.com/-yEXWsVoCD_s/UMPKVwrYbeI/AAAAAAAAAek/dUWkLXZENBY/IMAG0370.jpg" width="100" heigh="100"></li><li><img class="lazy" src="img/grey.gif" data-original="http://lh5.ggpht.com/-nTyeCCzS-9I/UMPKaubLsPI/AAAAAAAAAes/jQsqerqQy_Y/IMAG0369.jpg" width="100" heigh="100"></li><li><img class="lazy" src="img/grey.gif" data-original="http://lh6.ggpht.com/-lgcn83uOsh0/UMPKe9nTFuI/AAAAAAAAAe0/5YFkCf0eOfU/IMAG0368.jpg" width="100" heigh="100"></li><li><img class="lazy" src="img/grey.gif" data-original="http://lh3.ggpht.com/-mnaR8BtfzMA/UMPKkSUKTNI/AAAAAAAAAe8/XybgRgxht-4/IMAG0367.jpg" width="100" heigh="100"></li><li><img class="lazy" src="img/grey.gif" data-original="http://lh4.ggpht.com/-QmcNStSLKPY/UMPKrCLMjyI/AAAAAAAAAfE/47Sd2hnPQ8c/IMAG0366.jpg" width="100" heigh="100"></li><li><img class="lazy" src="img/grey.gif" data-original="http://lh6.ggpht.com/-iDIxDPiRSfs/UMPKxD-q1oI/AAAAAAAAAfM/MjnbPwUZWps/IMAG0365.jpg" width="100" heigh="100"></li><li><img class="lazy" src="img/grey.gif" data-original="http://lh5.ggpht.com/-WewlJZCs1Gk/UMPK35OWJnI/AAAAAAAAAfU/bEDZ22oKbjo/IMAG0364.jpg" width="100" heigh="100"></li><li><img class="lazy" src="img/grey.gif" data-original="http://lh3.ggpht.com/-isPegiQAOno/UMPK9YSuDwI/AAAAAAAAAfc/K9q7g1cYM5E/IMAG0363.jpg" width="100" heigh="100"></li><li><img class="lazy" src="img/grey.gif" data-original="http://lh4.ggpht.com/-QNbW4_jbqRw/UMPLEJ_ADvI/AAAAAAAAAfk/-1hUAc3WyOs/IMAG0362.jpg" width="100" heigh="100"></li><li><img...

CSS

ul {list-style-type: none; }
ul li {list-style-type: none; float: left;}

button {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

JavaScript

(function($){
    var defaults = {
        parent: 'document',//Unused
        offset: 200,//the number of pixels before loading is triggered
        elements: [],//Holds the elements who haven't been loaded yet
        srcAttr : 'data-original',// the attribute tag for the data source
        effect: 'fade',//the animation effect to show the element
        callback: null,//a function to call after each element is loaded
    }
    var methods = {
        init: function() {
            if ($(this).data('loadLater')) {
                console.log("I canhazdata!", $(this).data('loadLater'));
                var data = $(this).data('loadLater');
                data.elements = data.elements.concat(this.toArray());
            } else {
                var data = $.extend({}, defaults, arguments[0]);
                data.elements = data.elements.concat(this.toArray());
                data = $(this).data('loadLater', data);
            }
            var that = this;
            methods.update.apply(that);
            $(document).scroll(function(e){
                methods.update.apply(that);
            });
        },
        update: function(){
            var data = $(this).data('loadLater');
            console.log("in update ", this, data);
            var offset = data.offset;
            var elms = data.elements;
            var remainingElms = [];
            var win = $(window)
            var winTop = win.scrollTop();
            var winBottom = winTop + win.height();
            var winLeft = win.scrollLeft();
            var winRight = win.scrollLeft() + win.width();
            
            console.log("win space ", winTop, winBottom, winLeft, winRight);
            
            for (var i = 0; i < elms.length; i++) {
                var elm = $(elms[i]);
                //is the elm event visible
                if (elm.is(':visible')) {
                    var elmOffset = elm.offset();
                    var elmTop = elmOffset.top;
                   ...