jquery plug-in implements image lazy loading effect code_jquery

It reduces the page loading time and reduces the pressure on the server. I looked at the javascript source code and found lazyload written in it. I searched on Baidu and found a jquery plug-in that achieves this effect: jquery.lazyload, a Very good plug-in.
For example, if you open a relatively large or long web page, then Lazy load can load the pictures in the area you see first, and then load the pictures there when you scroll to them.
If you are a picture website and you need to load many pictures on one page, this plug-in is a very good choice.
How to use, quote the following js:
View source code print help

Copy code The code is as follows:

Add the following javascript to your page:
View source code print help 1 $("img").lazyload();
This will cause all images to be loaded lazily. The plug-in also has several configuration items to set.
Of course, for some users, the above functions are far from meeting the requirements. Let’s take a look at how to set the sensitivity. We can set the threshold to control this function, which is more user-friendly.
$(“img”).lazyload({ threshold : 200 });
Set the threshold to 200, which means loading 200 pixels before the image is seen. Of course, you can also trigger the loading image event by setting placeholder images and custom events
View source code print help

Copy code The code is as follows:

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

We can also define some image display effects by defining effect parameters
View source code printing help

Copy code The code is as follows:

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

Download address: source, minified or packed