Lazyload

by freedawirl

HTML

<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg" width="300" height="500" alt="BMW M1 Hood">

<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_side.jpg" width="300" height="500" alt="BMW M1 Side">

<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://www.appelsiini.net/projects/lazyload/img/viper_1.jpg" width="300" height="500" alt="Viper 1">

<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://www.appelsiini.net/projects/lazyload/img/viper_corner.jpg" width="300" height="500" alt="Viper Corner">

<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m3_gt.jpg" width="300" height="500" alt="BMW M3 GT">

<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://www.appelsiini.net/projects/lazyload/img/corvette_pitstop.jpg" width="300" height="500" alt="Corvette Pitstop">

<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg" width="300" height="500" alt="BMW M1 Hood">

<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_side.jpg" width="300" height="500" alt="BMW M1 Side">

<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://www.appelsiini.net/projects/lazyload/img/viper_1.jpg" width="300" height="500" alt="Viper 1">

<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://www.appelsiini.net/projects/lazyload/img/viper_corner.jpg" width="300" height="500" alt="Viper Corner">

<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif"...

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) {
      ...