Lazy Load jQuery plug-in for lazy loading of images_jquery

How to use?
Lazy Load relies 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 code The code is as follows:

 
$("http://www.appelsiini.net/projects/lazyload/img").lazyload() ;

This will cause images under the id="http://www.appelsiini.net/projects/lazyload/img" area to be lazy loaded.
Set sensitivity
The plug-in provides the threshold option, which can control the loading of images by setting the threshold value (the distance from the trigger loading point to the image). The default value is 0 (loading when the image boundary is reached).

Copy code The code is as follows:

 
$("http://www.appelsiini.net/projects/lazyload/img").lazyload( { threshold : 200 });

Set the threshold to 200, and start loading the image when the visible area is 200 pixels away from the image. (The literal meaning of this sentence is the same as mine. Inconsistent 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. In this case, you need Set a URL for the placeholder image. Transparent, gray and white 1x1 pixel images are already included in the plugin.

Copy code The code is as follows:

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

event The trigger loading
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 window. Location. To prevent the gray placeholder 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 by default to display the image. In fact, you can use any special effects you want to process. Below The code uses the FadeIn effect. This is the demo page.

Copy the code The code is as follows:

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

Picture in 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 It is a horizontal scrolling demo page and a vertical scrolling demo page.
CSS code:

Copy code The code is as follows:

#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 scrolling the page, Lazy Load will loop through the loaded images. In the loop, it will check whether the image is within the visible area. By default, the first image will be found The loop stops when there is an image 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 is the same as the order in the HTML code. However, in some layouts, this assumption is not true. However, you can pass failurelimit options to control loading behavior.

Copy code The code is as follows:

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

Set the failurelimit to 10 so that the plug-in will stop searching only after finding 10 images that are not in the visible area. If you have a naughty layout, please set this parameter higher.
Lazy loading of images
An incomplete function of the Lazy Load plug-in, but it can also be used to implement lazy loading of images. The following code implements the page loading completion 5 seconds after the page is loaded, the images in the specified area will be loaded automatically. This is a delayed loading demo 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);
});

Download plug-in
Latest version: Source code, Compressed code, Packed code
Known issues
Due to webkit bug #6656, Lazy Load does not work in Safari and Chrome. It will immediately load all the images you want and don't want to be loaded.
It seems that jQuery 1.3.x makes the plug-in invalid in IE. . All images will be loaded in the background even if they should not be loaded. The author is working on solving this problem, and in the meantime can only use the plugin in jQuery 1.2.6.
Also, if you use Mint , please add the mint tag to the head of the page. If you add the mint tag to the end of the page, it will interfere with the Lazy Load plug-in. This is a fairly rare problem. If anyone finds a solution, please contact the author.