js lazy lazy loading an image page images

Nov 11 posted in Internet (RSS), comments.

How to use?

Lazy Load depends on jQuery . add the following code into the page head area:

1 2	<script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script>

And in the execution of your code by adding the following statement:

1	$("http://www.appelsiini.net/projects/lazyload/img").lazyload();

This area will be delayed under the picture will load.

Set sensitivity

Plug-in provides threshold options, you can set the threshold (the trigger to load the image at the distance) to control the images to load default value is 0 (when the load reaches the border pictures).

1	$("http://www.appelsiini.net/projects/lazyload/img").lazyload({ threshold : 200 });

The threshold set at 200, when the viewable area 200 pixels from the picture, when there began to load the picture (this one the original literal meaning, and I understand the inconsistency, the original: Setting threshold to 200 causes image to load 200 pixels before it is visible.)

Placeholder image

You can also set a placeholder image and define the load event to trigger the action. Then need to set a placeholder image URL address transparent, gray and white 1x1 pixel images have been included in the plug inside.

1	$("img").lazyload({ placeholder : "img/grey.gif" });

Event-triggered load

JQuery event can be any time, such as: click and mouseover. You can also use custom events, such as: sporty and foobar. Default, waits until the user scrolls to the location where the picture window in the gray placeholder image Click the images to load before being blocked, you can do:

$("img").lazyload({
        placeholder : "img/grey.gif",
        event : "click"
});

Use of special effects

When the image fully loads, plug-in by default use show() method to map displayed. In fact, you can use any special effects you want to deal with the code below to use FadeIn effect, which is the demo page .

$("img").lazyload({ 
        placeholder : "img/grey.gif",
        effect : "fadeIn" 
});

Pictures inside the container

You can plug in a scrollable container with a picture, for example, the DIV element with a scroll bar you have to do is define the container for the jQuery object and passed as a parameter inside the initialization method, which is a horizontal scrolling demo page and vertical scrolling demo page .

CSS code:

#container {
        height: 600px;
        overflow: scroll;
}

JavaScript code:

$("img").lazyload({
         placeholder : "img/grey.gif",
         container: $("#container")
});

When the picture does not order

Scroll down the page when, Lazy Load will load the pictures for the cycle in the loop detection area in the visual image is by default not visible in the first area to find a picture stop the loop. Picture is considered to flow distribution, the order in the page image and HTML code in the same order, but in some of the layout, this assumption is not valid, but you can failurelimit options to control load behavior.

1
2
3

$("img").lazyload({ 
        failurelimit : 10
});

Will failurelimit to 10 found that plug-in area 10 picture is not visible until the search stops if you have a layout of wretched, please set this parameter higher.

Lazy Loading Images

Lazy Load Plugin for an incomplete features, but it can also be used to implement lazy loading of images below code to achieve page load before loading the page is loaded after 5 seconds, the picture within the designated area automatically loaded, which is delayed loading the demo page .

$(function() {
        $("img:below-the-fold").lazyload({
                placeholder : "img/grey.gif", 
                event : "sporty" 
        });
});
$(window).bind("load", function() { 
        var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});

/*
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2009 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.5.0
 *
 */
(function($) {

    $.fn.lazyload = function(options) {
        var settings = {
            threshold    : 0,
            failurelimit : 0,
            event        : "scroll",
            effect       : "show",
            container    : window
        };
                
        if(options) {
            $.extend(settings, options);
        }

        /* Fire one scroll event per scroll. Not one scroll event per image. */
        var elements = this;
        if ("scroll" == settings.event) {
            $(settings.container).bind("scroll", function(event) {
                
                var counter = 0;
                elements.each(function() {
                    if ($.abovethetop(this, settings) ||
                        $.leftofbegin(this, settings)) {
                            /* Nothing. */
                    } else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $(this).trigger("appear");
                    } else {
                        if (counter++ > settings.failurelimit) {
                            return false;
                        }
                    }
                });
                /* Remove image from array so it is not looped next time. */
                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }
        
        this.each(function() {
            var self = this;
            
            /* Save original only if it is not defined in HTML. */
            if (undefined == $(self).attr("original")) {
                $(self).attr("original", $(self).attr("src"));     
            }

            if ("scroll" != settings.event || 
                    undefined == $(self).attr("src") || 
                    settings.placeholder == $(self).attr("src") || 
                    ($.abovethetop(self, settings) ||
                     $.leftofbegin(self, settings) || 
                     $.belowthefold(self, settings) || 
                     $.rightoffold(self, settings) )) {
                        
                if (settings.placeholder) {
                    $(self).attr("src", settings.placeholder);      
                } else {
                    $(self).removeAttr("src");
                }
                self.loaded = false;
            } else {
                self.loaded = true;
            }
            
            /* When appear is triggered load original image. */
            $(self).one("appear", function() {
                if (!this.loaded) {
                    $("<img />")
                        .bind("load", function() {
                            $(self)
                                .hide()
                                .attr("src", $(self).attr("original"))
                                [settings.effect](settings.effectspeed);
                            self.loaded = true;
                        })
                        .attr("src", $(self).attr("original"));
                };
            });

            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });
        
        /* Force initial check if images should appear. */
        $(settings.container).trigger(settings.event);
        
        return this;

    };

    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */

    $.belowthefold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).height() + $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    };
    
    $.rightoffold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).width() + $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };
        
    $.abovethetop = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top;
        }
        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
    };
    
    $.leftofbegin = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left;
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() */

    $.extend($.expr[':'], {
        "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
        "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
        "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
        "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
    });
    
})(jQuery);