jquery.lazyload implements lazy loading of images jquery plug-in_jquery

What is ImageLazyLoad technology
When there are many images on the page, opening a page will inevitably cause a large amount of data interaction with the server. Especially for high-definition pictures, they take up several M of space. ImageLazyLoad technology is that the pictures on the currently visible interface are loaded, but the pictures on the invisible page (visible by pulling down the scroll bar) are not loaded, which will inevitably lead to a qualitative improvement in speed.

How to implement ImageLazyLoad

1. Use JQuery plug-in, plug-in name: jquery.lazyload (7kb size), compressed (3kb size)


Online compressed js http://closure-compiler.appspot.com/home
Although it is a very awesome special effect, using the JQuery plug-in only requires a few lines of code. The usage process is as follows:

1. Import JS plug-in


2. Add the following javascript to your page:

$("img").lazyload();

This will cause all images to be loaded lazily.


Of course the plug-in also has several configuration items to set.

1. Change threshold

$(“img”).lazyload({ threshold : 200 });

Set the threshold to 200, which means that when the picture is not viewed First load 200 pixels before reaching.


2. Of course, you can also trigger the loading image event by setting placeholder images and custom events

Copy code The code is as follows:

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

3. You can define some image display effects by defining effect parameters

Copy code The code is as follows:

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

LazyLoad (delayed loading) technology is not only used to delay loading of images in web pages, but also for data. Google Reader and Bing image search can 🎜>LazyLoad technology is fully utilized;
Defects:
1. Conflict with Ajax technology;
2. Lazy loading of images. When encountering extremely high images, the loading will stop;
3. Students who write irregular codes should pay attention. No matter what the reason is, if the height attribute of the img tag in your page is undefined, then I suggest you not to use ImageLazyLoad

Everyone can Directly adopt Taobao's lazy loading technology: (2kb size)
http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js
The calling method is also very simple:

Note: This script depends on yahoo-dom -event, yui 2.x needs to be loaded in the page, you can also directly quote the following address:


The configuration parameters are as follows:

Copy code The code is as follows:

In manual mode, you need to manually change the src attribute name of the image that needs to be delayed in the page. Change to data-lazyload-src. For example, on the SRP page, the last 20 pictures in the baby list are loaded lazily. When output, the html code is:

If you are a fan of JS frameworks such as Jquery, Prototype, etc., they all provide customized LazyLoad Plugin;

Can be viewed

http://www.appelsiini.net/projects/lazyload

LazyLoad (lazy loading) technology is not only used to delay loading of images in web pages, but also for data. Google Reader and Bing image search make full use of

LazyLoad technology;