Lazy Load, jQuery plug lazy loading picture

Quote

from http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/

Lazy Load, jQuery plug-in delay in loading pictures
Jan 31st, 2010
Translate
Leave a comment
Go to comments. This translation from the Lazy Load Plugin for jQuery, introduce a jQuery plugin that provides lazy type loading page image features.

Lazy Load is a jQuery plugin written using JavaScript. It can delay a long page load pictures. Browser visible in the image outside the region will not be loaded until the user scroll the page to their location. This treatment of pre-loaded picture is just the opposite.

Contains a lot of the big picture in the long delay in loading the page images can speed up page loading. Browser will load the visible image in the ready state after that. In some cases, can help reduce server burden.

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 the implementation of the code in your add the following statement:

1
$ ("Http://www.appelsiini.net/projects/lazyload/img"). Lazyload ();
This will enable the regional picture will be delayed under the load.

Sensitivity plug-in provides a set threshold option, you can set the threshold (the trigger to load the image at a distance) to control the images to load. The default value is 0 (when the load reaches the border image.)

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 there is time to start loading images. (This is an original and I understand the literal meaning of inconsistency, the original: Setting threshold to 200 causes image to load 200 pixels before it is visible.)

Placeholder images you can also set a placeholder image and load the custom event to trigger action. Then need to set a placeholder image URL address. Transparent, gray and white 1x1 pixel images have been included in the plug-in inside .

1
$ ("Img"). Lazyload ({placeholder: "img / grey.gif"});
Event-triggered events can be any jQuery load 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 of the window image. In Before the gray placeholder image is clicked to stop loading pictures, you can do:

1
2
3
4
$ ("Img"). Lazyload ({
placeholder: "img / grey.gif",
event: "click"
});
When the image is fully loaded with special effects when the use of plug-ins by default show () method to the map display. In fact, you can use any you want to deal with the effects. The following code uses FadeIn effect. This is the demo page.

1
2
3
4
$ ("Img"). Lazyload ({
placeholder: "img / grey.gif",
effect: "fadeIn"
});
Pictures in the container which you can plug in a scrollable container with the picture, for example, the DIV element with the scroll bar. You have to do is define the container jQuery object and passed as a parameter initialization inside. This is the level of Scroll the page and vertical scrolling demo 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 is not in order of when scrolling the page, Lazy Load to cycle to load the pictures. In the loop is in the visual detection of image regions. By default, find the first picture is not visible when you stop the loop region. Photo flow distribution is considered, the picture in the page HTML code in the sequence and order of the same. But in some of the layout, this assumption is not valid. But you can failurelimit options to control the load behavior.

1
2
3
$ ("Img"). Lazyload ({
failurelimit: 10
});
Will failurelimit to 10 found that plug-in 10 picture is not visible until the region to stop the search. If you have a layout of wretched, please set this parameter higher.

Lazy loading picture
Lazy Load plugin features an incomplete, but it can also be used to implement lazy loading of images. The following code before loading the page is loaded. 5 seconds after the page is loaded, the picture within the designated area automatically loaded. This is the demo page loading delay.

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);
});
Download the latest version of plug-ins: source code, the compressed code, the code package

Known issues because webkit's bug # 6656, Lazy Load can not be in the Safari and Chrome. It will immediately load all you want and you do not want to be loaded into the picture.

That looks like jQuery 1.3.x plug-in IE, ineffective. All images will be loaded in the background, even though they should not be loaded. The authors are hard to solve this problem, in this period can only stay in the jQuery 1.2.6 use the plug-in.

Also, if you are using Mint, set the mint added to the page header tags, labels added to the page if the end of the mint will interfere with Lazy Load Plugin. This is a very rare problem, if someone find a solution, please contact the author.
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of Lazy Load, jQuery plug lazy loading picture

  • 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