Using jquery plug-ins to implement picture delay loading (lazy loading)

Sometimes we see some large sites, page if there are many pictures, when you scroll to the corresponding line, the current picture of the row is loaded immediately, this way the page in the open only add visual area of the picture, and other hidden pictures are not loaded, a program to speed up the page loading, for the longer page, This plan is better.

It is recommended to use the jquery image delay loading plugin jquery.lazyload to implement picture delay loading to improve website opening speed

: Http://www.appelsiini.net/download/jquery.lazyload.js

Fixed version: Jquery.lazyload revision. RAR (Revision notes)
I. Quick use of the article
1. Import JS Plugin

<script src= "Js\jquery.js" type= "Text/javascript" ></script> <script src= "Js\jquery.lazyload.js" type = "Text/javascript" ></script>

2. Add the following JavaScript to your page:

<script type= "Text/javascript" >     $ ("img"). Lazyload ();  </script>

This will cause all images to delay loading;

second, high-level article detailed introduction (do not want to know so many can directly bypass)

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.

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>

and add the following statement to your execution code:

$ ("#xd"). Lazyload ();<br>

This will cause the images under the id= "XD" area to be loaded lazily.

Setting sensitivity

The plugin provides the threshold option to control the loading of a picture by setting a threshold (the distance from the load to the picture). The default value is 0 (loaded when the picture boundary is reached).

$ ("#xd"). Lazyload ({threshold:200});

The threshold value is set to 200, and the image is loaded when the viewable area is 200 pixels away from the picture. (the literal meaning of this sentence and I understand inconsistent, the original: Setting threshold to the causes image to the load pixels before it is visible.)

Parameter: Threshold, the value is a number, which represents the height of the page. If set to 200, the scrollbar will start loading the picture when it is 200 higher than the target position, allowing the user to be unaware.

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.

$ ("img"). Lazyload ({placeholder: "Img/grey.gif"});

Parameter: Placeholder, the value is a picture path. This image is used to occupy the location of the image that will be loaded, and the bitmap will be hidden when the image is loaded.

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. Block images from loading before the gray placeholder picture is clicked, you can do this:

$ ("img"). Lazyload ({     placeholder: "Img/grey.gif",     

Parameters: Event, value has click (click), mouseover (mouse over), sporty (motion), Foobar (...). You can implement the mouse over or click on the image to start loading, the latter two values are not tested ...

Using effects

When the picture is fully loaded, the plugin uses the show () method by default to display the graph. In fact, you can use any of the special effects you want to handle. The following code uses the FadeIn effect. This is the demo page.

$ ("img"). Lazyload ({     placeholder: "Img/grey.gif",     

Parameters: effect (special effects), values are show (direct display), FadeIn (Fade in), Slidedown (drop), etc., commonly used 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.

CSS Code:

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

JavaScript Code:

$ ("img"). Lazyload ({     placeholder: "Img/grey.gif",     

Parameter: container, value is a container. Lazyload By default when you pull the browser scroll bar, this parameter allows you to load the scroll bar of a div by loading the picture in sequence.

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 control the load behavior with the FAILURELIMIT option.

$ ("img"). Lazyload ({     

Setting Failurelimit to 10 allows the plugin to find 10 images that are not in the visible area before stopping the search. If you have a wretched layout, set this parameter up a bit higher.

Parameter: Failurelimit, the value is a number. Lazyload by default when the first image not in the visible area is found, it will not continue to load, but when the HTML container is confusing, the picture in the visible area is not loaded. Failurelimit is intended to load images outside of the visible area of N to avoid this problem.

Multi-parameter Simultaneous setting method

<script type= "Text/javascript" >         $ ("img"). Lazyload ({placeholder: "Images/white.gif", threshold:200, Effect: "FadeIn"}); </script>

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 ({         placeholder: "Img/grey.gif",         event: "Sporty"    }) ; }); $ (window). Bind ("Load", function () {     

Using jquery plug-ins to implement picture delay loading (lazy loading)