JQuery lazy load Picture lazy load

A jQuery-based picture delay-loading plugin that loads after the user scrolls the page to the picture.

For more pictures of the page, using the picture delay loading, can effectively improve the page loading speed.

version :

jQuery v1.4.4+

jQuery Lazy Load v1.7.2

Precautions:

To actually implement the picture delay loading, the real picture address must be written in the Data-original attribute. If SRC is the same as data-original, it is only a special effect and does not reach the function of lazy loading.

How to use :

Loading JavaScript files

Modifying an IMG tag that requires lazy loading in HTML code

<!--to write the real picture address in the Data-original attribute, while the picture in the SRC attribute is replaced with a placeholder image (such as a 1x1 pixel gray picture or a loading GIF image) to add class= "lazy" to distinguish which images need to be loaded lazily  , of course, you can also change the keyword, modify the same time remember to modify the JQuery selector when the call to add the width and Height properties to help when the picture is not loaded when the space required-

Call the Lazy Load

$ (' Img.lazy '). Lazyload ();

Parameter description

Name	Default value	Description
Container	Window	The parent container. Delays loading pictures in the parent container.
Event	' Scroll '	Events that trigger loading
Effect	' Show '	Loads the effects of using the animated effects such as show, FadeIn, Slidedown and other jQuery, or custom animations.
Effectspeed	Undefined	Animation time. Parameters used as effect: effect (Effectspeed)
Data_attribute	' Original '	Data attribute suffix for real image address
Threshold	0	Sensitivity. A default of 0 indicates that the picture appears in the display area immediately after the display is loaded, and set to integer to indicate that the picture is loaded when x pixels are entered into the display area, and a negative number indicates that the picture is loaded when it enters the display area x pixels.
Failure_limit	0	Tolerance range. When the page scrolls, lazy load iterates over the lazily loaded picture, checking to see if the 1th invisible image is found in the display area and terminates the traversal. Because Lazy Load considers the image sort to be the same as the sort in the code in the HTML, there may be exceptions to this value to enlarge the tolerance range.
Skip_invisible	True	Skip the hidden picture. When the picture is not visible (such as Display:none), it is not forced to load.
Appear	Null	Image Load Event (Function), there are 2 parameters: Elements_left (number of pictures not loaded), settings (lazyload parameters)
Load	Null	The image loads the event (Function), there are 2 parameters, with the appear.

Related information

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

JQuery lazy load Picture lazy load