Lazy Load jQuery plug-in Chinese usage documentation for delayed loading of images_jquery

What is LazyLoad technology?

When there are many pictures on the page, opening a page will inevitably cause a large amount of data interaction with the server. Especially for high-definition pictures, they occupy hundreds of K of space. Lazy Load is a jQuery plug-in written in JavaScript. It can delay loading of images on long pages. Images outside the browser's visible area will not be loaded until the user scrolls the page to where they are. This is similar to images Preloading is handled exactly the opposite way.
Lazy loading of images on long pages that contain many large images can speed up page loading. The browser will enter the ready state after loading visible images. In some cases, it can also help reduce server load, which will inevitably cause Qualitative improvement in speed.
Compatible with: ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0. Some functions of safari and chrome are not supported.

Lazy Load is inspired by the YUI ImageLoader toolbox made by Matt Mlinac. This is the demo page.

The link to the original text is: http://www.appelsiini.net/projects/lazyload


The current version of Lazy Load is 1.8.1

Download address: http://www.jb51.net/jiaoben/63757.html

Instance download:

Download statement:
1. Note: This code is for learning and communication only, please do not use it for commercial purposes.
2. Note: This code is for learning and communication only, please do not use it for commercial purposes.
File information: File name: Lazy Load lazy loading image example
File Hash: dd3e435124e377c2da33344d442f85d1
File size: 1.1 MB
File upload date: March 25, 2012
File update date: March 25, 2012
File description: When there are many pictures on the page, opening a page will inevitably cause a large amount of data interaction with the server. Especially for high-definition pictures, they occupy hundreds of K of space. Lazy Load is a jQuery plug-in written in JavaScript. It can delay loading of images on long pages. Images outside the browser's visible area will not be loaded until the user scrolls the page to where they are. This is similar to images Preloading is handled exactly the opposite way.

How to use? Let’s get to the point.

Lazy Load depends on jQuery. Please add the following code to the page head area:



Usage of Lazy Load The method is very simple, but the new version has made some adjustments, and the attributes of the tag must be modified. Change the src attribute in the tag to the URL of the waiting image, and fill in the data-original attribute with the real image URL.
is as follows:

Suggestion: For the waiting image in src, it is best to use a 1-pixel monochrome image.
The JS code is as follows:

In this way, the effect of Lazy Load can be achieved. Demo

After watching the Demo, do you feel that there is no effect? ​​This problem will be in Mentioned later.

In fact, it is not necessary to use the data-original attribute specified by it to store the image URL. You can also customize other attribute names yourself, as follows:

The JS code is as follows:



Just set the data_attribute attribute to the corresponding name. (Note: HTML code is not case sensitive! So "data-" can only be followed by lowercase letters or numbers.)

For Browsers that do not support JavaScript should have corresponding downgrade processing.

can use the