LazyLoad rewrite - simple - all items

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0/ember.min.js"></script>
<div id="singleElm" style="background-color: red; display:block; width: 20; height:20px;">
    <img src data-original="http://lh4.ggpht.com/-QNbW4_jbqRw/UMPLEJ_ADvI/AAAAAAAAAfk/-1hUAc3WyOs/IMAG0362.jpg"></img>
</div>
<script type="text/x-handlebars" data-template-name="application">
    <ul id="coffeesList">
    {{#each coffee in App.Coffees.content}}
    <li><img src="" data-original="{{unbound coffee.content.src}}"/></li>
    {{/each}}
    </ul>
</script>

CSS

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

button {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
#coffeesList li {
    width: 250px;
    height: 250px;
    overflow: hidden;
    background-color: #bdbdbd;
    padding: 10px;
    border-radius: 3px;
    margin: 5px;
}
#singleElm {
    overflow: hidden;
}
#coffeesList img, img {
    min-width: 250px;
    max-width: 250px;
    display: inline-block;
    vertical-align: top;
}

JavaScript

App = Em.Application.create();

App.Router.map(function(){
    this.resource('index', {
        path: '/'
    });
});

App.Coffees = Em.Object.create({
    content: []
});

var serverURL = "http://picasaweb.google.com/data/feed/api/user/buckley.robin/albumid/5751950773409336513" + 
    '' +'?alt=json&thumbsize=' + '200';

function requestImages() {
    $.ajax({
        url:serverURL,
        success: function(data){
            var allImages = data.feed.entry;
            App.Coffees.content.pushObjects(allImages);
            Em.run.scheduleOnce('afterRender', this, function(){
                Em.run.later(this, function(){
                    $('#coffeesList img').loadLater({
                        onComplete: function(){
                            console.log("i'm done!");
                        }
                    });
                    $(document).trigger('scroll')
                }, 2000)
            })
        },
    })
};

var start = window.setTimeout(function(){
    requestImages();
}, 200);



(function($){
    //Don't manually edit the defaults, instead, pass the values in an object
    var defaults = {
        parentElm: window,//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 **If you set this to null, image loading will be turned off
        effect: 'fade',//the animation effect to show the element
        effectTime: 500,//how long the effect should take to complete
        callback: null,//a function to call after each element is loaded
        onComplete: null,//a function to call after all elements are loaded (usefull for infinite scroll)
        loadedClass: "loaded",//a class to add to elements once thier content is loaded
        maxItems: 15,//If the plugin finds more items than this they will be sliced into separate calls
        overLoadCallBack:...