Detailed description of image lazy loading technology using jquery plug-in_jquery

Here it is recommended to use the jquery image lazy loading plug-in jquery.lazyload to implement delayed image loading and improve website opening speed. Download address: http://www.appelsiini.net/download/jquery.lazyload. js

1. Quick Use Chapter
1. Import JS plug-in

Copy code The code is as follows:

2. Add the following javascript to your page:

Copy code The code is as follows:

This will cause all images to be loaded lazily;
2. Detailed introduction to the advanced chapter (I don’t want to know so much can be bypassed directly)
Lazy Load is a jQuery plug-in written in JavaScript. It can delay loading of images in long pages. Images outside the browser's visible area will not be loaded until the user Scroll the page to where they are. This is the opposite of how image preloading is handled.
Lazy loading of images on long pages with many large images can speed up page loading. The browser will load visible images before After that, it enters the ready state. In some cases, it can also help reduce server load.
Lazy Load is inspired by the YUI ImageLoader toolbox produced by Matt Mlinac.
How to use?
Lazy Load depends on jQuery. Please Add the following code to the page head area:

Copy the code The code is as follows:

And add the following statement to your execution code:

Copy the code The code is as follows:

$("#xd").lazyload();

This will cause the images under the id="xd" area to be lazy loaded.
Set sensitive The
plug-in provides the threshold option, which can control the loading of images by setting the threshold value (the distance from where the loading is triggered to the image). The default value is 0 (loaded when the image boundary is reached).
view sourceprint?$ ("#xd").lazyload({ threshold : 200 });
Set the threshold as 200, and start loading the image when the visible area is 200 pixels away from the image. (The literal meaning of this sentence The meaning is inconsistent with my understanding. Original text: 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 events to trigger the loading action. At this time, you need to set a URL address for the placeholder image. Transparent, gray and white 1×1 pixel images are already included in the plug-in.

Copy code The code is as follows:

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

Event triggered loading
The event can be any jQuery event, such as: click and mouseover. You can also use custom events, such as: sporty and foobar. By default, it is in a waiting state until the user scrolls to the position of the picture on the window. In the gray placeholder To prevent the image from loading before it is clicked, you can do this:

Copy the code The code is as follows:

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});

Use special effects
When the image is fully loaded, the plug-in uses the show() method to display the image by default. In fact, you can use any special effects you want to process. The following code uses the FadeIn effect. This is the demo page.

Copy code The code is as follows:

$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});

The image is inside the container
You can use the plug-in on images in scrollable containers, such as DIV elements with scroll bars. All you have to do is define the container as a jQuery object and pass 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:

Copy code The code is as follows:

$("img").lazyload({
placeholder : "img/grey.gif ",
container: $("#container")
});

When the images are not arranged in order
When the page is scrolled, Lazy Load will cycle through the loaded images . Check whether the image is within the visible area in the loop. By default, the loop stops when the first image is found that is not in the visible area. Images are considered to be distributed in a fluid manner, and the order of the images in the page and the order in the HTML code The same. But in some layouts, this assumption is not true. However, you can control the loading behavior through the failurelimit option.

Copy code The code is as follows:

$("img").lazyload({
failurelimit : 10
});

Set failurelimit to 10 Let the plug-in find 10 images that are not in the visible area before stopping the search. If you have a cumbersome layout, please set this parameter higher.
Lazy loading of images
An incomplete function of the Lazy Load plug-in. But this can also be used to implement delayed loading of images. The following code implements loading after the page is loaded. 5 seconds after the page is loaded, the images in the specified area will be automatically loaded. This is a delayed loading demonstration page.

Copy code The code is as follows:

$(function() {
$("img: below-the-fold").lazyload({
placeholder : "img/grey.gif",
event : "sporty"
});
});
$(window ).bind("load", function() {
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});