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.

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.

: https://appelsiini.net/projects/lazyload/

How to use:

1. Load the JS file;

1 <  src= "Jquery.js"></script>2<  src = "jquery.lazyload.js" ></script >   

2. Modify the IMG tags in the HTML code that require lazy loading;

<!-- The real picture address is written in the Data-original attribute, and 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 in time, and of course you Can be replaced by other keywords, modified at 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 to fill the required space- <  class = "lazy" src = "Grey.gif" data-original = "Example.jpg" width = "640" Heigh = "480" >

3. Call Lazyload;

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

Parameter description

name	Default Value	Description
Container	Window	The parent container. Delays loading pictures in the parent container. [Demo1] [Demo2]
Event	' Scroll '	Events that trigger loading [Demo]
Effect	' Show '	Loads the effects of using the animated effects such as show, FadeIn, Slidedown and other jQuery, or custom animations. [Demo]
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). [Demo] (refer to the demo's source code)
Load	Null	The image loads the event (Function), there are 2 parameters, with the appear. [Demo] (refer to the demo's source code)

JQuery lazy load Picture lazy load