jquery deferred loading (lazy loading) plugin –jquery.lazyload.js

Lazy Load is a jQuery plugin written in JavaScript. It can delay loading pictures from long pages. Images outside the viewable area of the browser are not loaded until the user scrolls the page to where they are located. This is exactly the opposite of how picture preloading is handled.
Lazy loading of pictures in long pages containing many large pictures can speed up page loading. The browser will enter the ready state after the visible picture is loaded. In some cases, it can also help reduce the burden on the server.

Demo page:

Basic options

Fade in effect

Downgrade processing that does not support JavaScript browsers

Horizontal scrolling

Horizontal scrolling inside the container

Vertical scrolling inside the container

There are more than N pictures in the page

Load picture after five seconds of delay

Use ajax to load images

How to use

Lazy Load relies on jQuery. Please add the following code to the end of the HTML, that is, the </body> previous:

12	< script type = src Code class= "XML plain" >= ></ script > < script type = "Text/javascript" src = "Jquery.lazyload.js" ></ script >

You have to change the label of the picture. The address of the image must be placed on the data-original attribute. Give the lazy load image a specific class (for example: lazy). This way you can easily bundle the image plug-ins. The code is as follows:

1	<imgclass="lazy" alt="" width="640" height="480" data-original="img/example.jpg"/>

123	$(function() {    $("img.lazy").lazyload();});

This will cause all the class- lazy loaded pictures to be delayed.
Demo: Basic Options

TIPS: You must set the and of the picture here width height , or the plugin may not work correctly.

Set a critical point

The default slice will appear on the screen when loaded. If you want to load the picture in advance, you can set the threshold  option to set the threshold to 200 so that the picture is loaded early when it is 200 pixels from the screen.

123	$("img.lazy").lazyload({    threshold : 200});

Setting Events to trigger loading

You can use jquery events, for example, click and mouseover . You can also use custom events, such as sporty , foobar by default, until the user scrolls down and the image appears in the viewport. The images are loaded only when the user taps them:

123	$("img.lazy").lazyload({    event : "click"});

Demo: Load picture after five seconds of delay

Using effects

By default, the plug-in waits for the image to be fully loaded and called show() . You can use any effect you want. The following code uses the fadeIn  (fade effect).
Demo: Fade in effect

123	$("img.lazy").lazyload({    effect : "fadeIn"});

For scenarios where JavaScript is not enabled

JavaScript is active on almost all browsers. However, you may still want to be able to show real images on clients that do not support JavaScript. When the browser does not support JavaScript gracefully downgrade, you can put the real picture fragments in the write <noscript> tag.

12	<img class="lazy" data-original="img/example.jpg"width="640" heigh="480"><noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

Placeholders can be hidden through CSS.

123	.lazy {    display: none;}

In a JavaScript-enabled browser, you must display the placeholder when the DOM is ready, which can be done at the same time as the plug-in is initialized.

1	$("img.lazy").show().lazyload();

Picture inside the container

You can use a plugin on a picture of a scrollable container, such as a DIV element with a scrollbar. All you have to do is define the container as a JQuery object and upload it as a parameter to the initialization method.
Demo: Horizontal scrolling inside the container, vertical scrolling inside the container

When the image is not contiguous

When scrolling through a page, the Lazy load loops into the loaded picture. Detects whether the picture is within the viewable area in the loop. By default, the loop stops when you find the first picture that is not in the visible area. Images are considered to be stream-distributed, and the order of the images in the page is the same as in the HTML code. But in some layouts, such assumptions are not tenable. However, you can failurelimit control the loading behavior by using the options.

123	$("img.lazy").lazyload({    failure_limit : 10});

Set Failurelimit to 10 so that the plugin stops searching when it finds 10 pictures that are not in the visible area. If you have a wretched layout, set this parameter up a bit higher.

Load a hidden picture

There may be a lot of hidden images buried on your page. For example, the plugin used in the filter list, you can constantly modify the list of the purpose of the display state. To improve performance, Lazy Load ignores hidden images by default. If you want to load a hidden image, skip_invisible set thefalse

123	$("img.lazy").lazyload({     skip_invisible : false});

Download Plugin

The latest version of source code and compression code. Plugins are already on OSX's Safari 5.1, Safari 6, Chrome, Firefox 12 browser, Windows Chrome, ie 8 and IE 9 browser, and IOS5 (IPhone and I PAD) has been tested on Safari 5.1 browsers.

jquery deferred loading (lazy loading) plugin –jquery.lazyload.js