Ember and lazyLoading

by amindunited

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
<script type="text/x-handlebars">
    {{#collection contentBinding="Coffees.favoritesController" tagName="ul"}}
        <div class="fav" {{ action magoo target="Coffees.coffeeController" on="click"}}>
<div>
    <img {{bindAttr src="view.content.url"}} src="/blank.jpg" width="200px" />
            </div>
            <div class="title"><b>Name: </b>{{view.content.title}}</div>
            <div><b>Date: </b>{{view.content.date}}</div>    
        </div>
    {{/collection}}
</script>
<script type="text/x-handlebars">

        <button {{ action loadCoffees target="Coffees.coffeeController" }}>
    Load Coffees</button>

        {{#collection contentBinding="Coffees.coffeeController" tagName="ul"}}
            <div {{ action add target="Coffees.coffeeController" on="click"}}>
                <img {{bindAttr data-original="view.content.url"}} width="200px" />
            </div>
            <div class="title"><b>Name: </b>{{view.content.title}}</div>
            <div><b>Date: </b>{{view.content.date}}</div>
        {{/collection}}
</script>

CSS

ul { background-color: #363636; text-align:center;}
li {
    background-color: #bcbcbc;
    display: inline-block;
    padding:5px;
    margin:5px;
    border:inset 1px #9a9a9a;
    border-radius: 5px;
    width:200px
        font-size:6px;
}
li:hover {
    background-color: #cdcdcd;
    border:solid 1px #0072ed;
    border-radius: 5px;
}
li img:hover {
    border:solid 1px #3372ef;
    border-radius: 5px;
}
li div {
 text-align: left;   
}
li img {
    border:inset 1px #9a9a9a;
    border-radius: 5px;
}
.fav:before{
content:"Favorite!"
}
.fav {
    background-color: #B78D8D;
    text-align:center;
    border-radius: 5px;
    padding: 2px;
}

JavaScript

/*
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2012 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload
 *
 * Version:  1.8.1
 *
 */
(function($, window) {
    var $window = $(window);

    $.fn.lazyload = function(options) {
        var elements = this;
        var $container;
        var settings = {
            threshold       : 0,
            failure_limit   : 0,
            event           : "scroll",
            effect          : "show",
            container       : window,
            data_attribute  : "original",
            skip_invisible  : true,
            appear          : null,
            load            : null
        };

        function update() {
            var counter = 0;
      
            elements.each(function() {
                var $this = $(this);
                if (settings.skip_invisible && !$this.is(":visible")) {
                    return;
                }
                if ($.abovethetop(this, settings) ||
                    $.leftofbegin(this, settings)) {
                        /* Nothing. */
                } else if (!$.belowthefold(this, settings) &&
                    !$.rightoffold(this, settings)) {
                        $this.trigger("appear");
                        /* if we found an image we'll load, reset the counter */
                        counter = 0;
                } else {
                    if (++counter > settings.failure_limit) {
                        return false;
                    }
                }
            });

        }

        if(options) {
            /* Maintain BC for a couple of versions. */
            if (undefined !== options.failurelimit) {
                options.failure_limit = options.failurelimit; 
                delete options.failurelimit;
            }
            if (undefined !== options.effectspeed) {
      ...