Lazy loading images plugin

A jQuery plugin for loading images as they become visible on the page. Uses the Visible plugin.

by Ganesh

HTML

<div data-src="http://placekitten.com/200/199?1"></div>
<div data-src="http://placekitten.com/200/199?2"></div>
<div data-src="http://placekitten.com/200/199?3"></div>
<div data-src="http://placekitten.com/200/199?4"></div>
<div data-src="http://placekitten.com/200/199?5"></div>
<div data-src="http://placekitten.com/200/199?6"></div>
<div data-src="http://placekitten.com/200/199?7"></div>
<div data-src="http://placekitten.com/200/199?8"></div>

CSS

div { margin: 5px; width: 200px; height: 200px; background: #eee; }

JavaScript

// Visible plugin

(function($){

    var items = [];
    
    function winPos(win) {
        return { x: 0, y: 0, x2: win.width() - 1, y2: win.height() - 1 };
    }
   
    function pos(win, el) {
        var p = el.offset();
        var x = p.left - win.scrollLeft();
        var y = p.top - win.scrollTop();
        return { x: x, y: y, x2: x + el.width() -1, y2: y + el.height() - 1 };
    }
    
    function intersects(a, b) {
        return !(a.x2 < b.x || a.x > b.x2 || a.y2 < b.y || a.y > b.y2);
    }
    
    function check(win, w, item) {
        var p = pos(win, $(item.el));
        var s = intersects(w, p);
        if (s != item.shown) {
            item.shown = s;
            (s ? item.show : item.hide).call(item.el);
        }
    }

    $.fn.visible = function(show, hide){
        var win = $(window), w = winPos(win);
        return this.each(function(i, el){
            var item = { el: el, show: show, hide: hide, shown: false };
            items.push(item);
            check(win, w, item);
        });
    };
    
    $(window).on('scroll resize', function(e){
        var win = $(window), w = winPos(win);
        for (var i = 0; i < items.length; i++) {
            check(win, w, items[i]);
        }
    });

})(jQuery);

// Lazy loading images plugin

(function($){
    
    $.fn.lazyImage = function(){
        return this.visible(function(){
            $(this).append($('<img>', {'src':  $(this).data('src') }).css('opacity', 0).load(function(){
                $(this).animate({ opacity: 1 });
            }));
        }, function(){
            $(this).empty();
        });
    };
    
})(jQuery);

// Usage

$('div').lazyImage();