JQuery Lazy Load image loading delay,

JQuery Lazy Load image loading delay,

The jQuery-based image delay loading plug-in is loaded only after the user scrolls the page to the image.

For webpages with a large number of images, using images for delayed loading can effectively increase the page loading speed.

Version:

JQuery v1.4.4 +

JQuery Lazy Load v1.7.2

Notes:

To achieve image loading delay, you must write the real image address in the data-original attribute. If src is the same as data-original, it is only a special effect and does not support delayed loading.

Usage:

Load JavaScript files

<script src="jquery.js"></script> <script src="jquery.lazyload.js"></script> 

Modify the IMG tag to be delayed in HTML code

<! -- Write the real image address in the data-original attribute, and change the image in the src attribute to a placeholder image (for example, a gray image of 1x1 pixel or a gif image of loading) add class = "lazy" to differentiate which images require delayed loading. You can also change it to another keyword, remember to add the width and height attributes to the jQuery selector when you modify the call to help occupy the required space when the image is not loaded --> 

Call Lazy Load

$('img.lazy').lazyload();

Parameter description

Name	Default Value	Description
Container	Window	Parent container. Delays loading images in the parent container.
Event	'Scroll'	Events that trigger Loading
Effect	'Show'	Load the animation effects used, such as show, fadeIn, and slideDown.
Effectspeed	Undefined	Animation time. Used as the effect parameter: effect (effectspeed)
Data_attribute	'Original'	Data Attribute Suffix of the real image address
Threshold	0	Sensitivity. The default value is 0, indicating that the image is loaded immediately when it appears in the display area. The value is an integer indicating that the image is loaded when it enters the display area from x pixels; if it is set to a negative number, the image is loaded when it enters the display area x pixels.
Failure_limit	0	Tolerance range. During Page scrolling, Lazy Load traverses the delayed loading images and checks whether they are in the display area. By default, When 1st invisible images are found, the traversal is terminated. Lazy Load considers that the image sorting is the same as that in the HTML code, but exceptions may also occur. This value is used to expand the tolerance range.
Skip_invisible	True	Skip the hidden image. When the image is invisible (such as display: none), it is not forcibly loaded.
Appear	Null	The image loading event (Function) has two parameters: elements_left (number of images not loaded) and settings (lazyload parameter)
Load	Null	The uploaded image event (Function) has two parameters, the same as appear.

Related information

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