js lazy lazy loading an image page images

sponsored links
Lazy Load is a jQuery plugin written in JavaScript, it can be a long delay in loading the page the pictures in the browser viewing area outside the picture will not be loaded until the user scroll the page to their location. This image pre-loading approach is just the opposite.

In the big picture that contains many pages long delay in loading pictures you can speed up page loading. Browser will be loaded after the visible image is in the ready state, in some cases can help reduce the burden on the server.

Lazy Load inspired by Matt Mlinac produced YUI ImageLoader Toolbox This is the demo page .

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:

1
2
3
4
$("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 .

1
2
3
4
$("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:

1
2
3
4
#container {
        height: 600px;
        overflow: scroll;
}


JavaScript code:

1
2
3
4
$("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 .

1
2
3
4
5
6
7
8
9
$(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);

Download the plug-in


Latest Version: source code , code compression , code package
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of js lazy lazy loading an image page images

  • Hibernate primary key strategy-sequence

    Today, the use of hibernate in the company encountered a troublesome problem, the use of hibernate when the primary key generation strategy set sequence, but always reported in the implementation could not get next sequence value of the error, then o ...

  • hibernate call stored procedure

    hibernate call stored procedure

  • hibernate using c3p0 connection pooling

    Private http://www.lifevv.com/tenyo/doc/20070605102040991.html c3p0 for open source's JDBC connection pool, with the release hibernate. This article describes how to use the hibernate configuration in c3p0. c3p0 connection pool configuration is v ...

  • Hibernate configuration parameters hibernate.hbm2ddl.auto

    Hibernate in the configuration file: <properties> <property name="hibernate.hbm2ddl.auto" value="create" /> </ properties> Parameter Description: validate load hibernate, the authentication to create a database t ...

  • Build flex + spring + blazeds + hibernate application

    Build flex + spring + blazeds + hibernate application First, set up the project blazeds 1, will blazeds.war extract to a directory, such as: myflex /; 2, set up java works were such as: MyFlex, in the orientation of selection create project from exis ...

  • Hibernate connection pool configuration

    Hibernate connection pool configuration <! - Jdbc -> <property name="connection.driver_class"> oracle.jdbc.driver.OracleDriver </ property> <property name="connection.url"> jdbc: oracle: thin: @ 10.203.14.132:15

  • hibernate generic generic DAO

    package org.lzpeng.dao; import java.io.Serializable; import java.util.List; import org.hibernate.Criteria; import org.hibernate.Query; import org.hibernate.criterion.Criterion; import org.springside.modules.orm.hibernate.Page; /** * * @version 2009-1-10 *

  • Struts2 + hibernate + spring problem user log in

    dao layer services layer action jsp <tr> <td align="center"> <b> user name: </ b> </ td> <td> <s: textfield name = "czyNumber" cssClass = "textstyle" theme = "simple" size = &q

  • Hibernate secondary cache

    Hibernate cache: 2-bit cache, also known as process-level cache or SessionFactory level cache, secondary cache can be shared by all of the session Cache configuration and the use of: Will echcache.xml (the document code in hibernate package directory ...

  • Hibernate's lazy strategy

    hibernate Lazy strategy can be used in: <class> tag, it can be true / false Tags can <PROPERTY> values true / false type of necessary tools to enhance <set> <list> can tag values true / false / extra <many-to-one> <on ...

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries