Lazy load, lazy loading image of JQuery plugin

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.

The Lazy Load was inspired by Matt Mlinac's Imageloader Toolbox. This is the demo page.

Here are a few of the available demo pages available to those in a hurry for reference: basic options, fade-in display, script missing downgrade processing, horizontal scrolling, horizontal scrolling within containers, vertical scrolling within containers, super-many images in the page, time-lapse loading of images

View the contents of the browser cache between each request in the demo. You can detect what is actually loaded through the developer console (Chrome and Safari), Firebug (Firefox) or httpheaders (IE).

How to use?

Lazy Load relies on jQuery. Please add the following code to the page head area:

<script src="Jquery.js" type="Text/javascript"></script><script src ="Jquery.lazyload.js" type="Text/javascript"></script>

You must modify the HTML code. srcset the booth character picture in the properties, the demo page uses a 1x1 pixel gray GIF image. And you need to set the URL of the real picture to the data-original property. Here you can define a specific class object to get the picture that needs to be loaded lazily. In this way you can simply To control plug-in bindings.

Class="lazy" src="img/grey.gif" Data-original= "img/example.jpg" width="640" Heigh="480">

The code to process the picture is as follows.

$("Img.lazy"). Lazyload();

This will cause all class lazy the pictures to be loaded lazily. You can refer to the basic options demo

Setting sensitivity

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.

Class= "lazy" Src= "img/grey.gif" Data-original= "img/example.jpg" Width= "640" Heigh= "480" Span style= "color: #339933;" >><noscript>= "img/example.jpg" Width= "640" Heigh= "480" Span style= "color: #339933;" >></noscript>

Placeholders can be hidden through CSS.

{ displaynone;}

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.

$("Img.lazy"). Show(). Lazyload();

These are optional, but should be done if you want the plugin to degrade smoothly.

Setting sensitivity

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

$("Img.lazy"). Lazyload(});

Placeholder Pictures

You can also set a placeholder picture and define events to trigger the load action. You need to set a URL address for the placeholder picture. Transparent, gray and white 1x1 pixel images are already included in the plugin.

Event Trigger loading

Events can be any jQuery time, such as: click and mouseover . You can also use custom events such as: sporty and foobar . By default, the wait state is reached until the user scrolls to the location of the window slice. Before the gray placeholder picture is clicked prevent loading the picture, you can Sample to do:

$("img"). Lazyload("Img/grey.gif" "click"});

Using effects

When the picture is fully loaded, the plugin uses the show() method to display the diagram by default. You can actually use any of the effects you want to work with. The following code uses the FadeIn effect. This is the effect demo page.

$("Img.lazy"). Lazyload("FadeIn"});

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. This is a horizontal scrolling demo page and a vertical scrolling demo page.

#container {: overflow: ;

$("Img.lazy"). Lazyload({container: $("#container")});

When pictures are not arranged in order

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.

$("Img.lazy"). Lazyload(ten});

Set failurelimit to 10 to find 10 images that are not in the visible area to stop the search. If you have a wretched layout, set this parameter up a bit higher.

Delay Loading Pictures

An incomplete feature of the Lazy load plugin, but it can also be used to implement lazy loading of images. The following code implements the loading of the page after it has finished loading. After the page loads for 5 seconds, the pictures in the specified area are loaded automatically. This is the deferred loading demo page.

$(function(){ $("Img:below-the-fold").Lazyload({Event:"Sporty"});});$(Window).Bind("Load",function(){ var timeout = setTimeout(function() {$("Img.lazy"). Trigger("sporty")}, () ;} );

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

$("Img.lazy"). Lazyload(false});

Download Plugin

The latest version of the source code and the compressed 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.

Lazy load, lazy load image of JQuery plugin (GO)