jquery pictures Lazy Loading plugin jquery.lazyload usage method

How to use

1. Refer to jquery and jquery.lazyload.js to your page

<script src="Jquery-1.11.0.min.js" ></script><script src="Jquery.lazyload.js?v =1.9.1 "></script>

2. Add style for picture lazy picture Path reference method with Data-original

Class="lazy" data-original="Img/bmw_m1_hood.jpg" >class=" Lazy "Data-original=" Img/bmw_m1_side.jpg ">

3, JS out of the lazyload and set the image display mode

<script type="Text/javascript" charset= "utf-8" > $ (function () {$ ("Img.lazy"). Lazy  Load ({effect: "fadeIn"}); });</script>        

You can also use the class= "lazy" in the image, and initialize it using:

$ ("img")"FadeIn"}); 

This will work for the global picture!

4. Parameter setting

$("Img.lazy"). Lazyload ({placeholder:"Img/grey.gif",Pre-occupied with picturesplaceholder, the value is a path to a picture. This image is used to occupy the location of the image to be loaded, and when the image is loaded, the bitmap hides the effect:"FadeIn",What effect is loaded in useeffect (special effects), values have show (direct display), FadeIn (Fade in), Slidedown (drop), etc., commonly used fadeIn threshold:200,Start loading early//threshold, the value is a number, which represents the height of the page. If set to 200, indicates that the scrollbar starts loading the picture when it is 200 higher than the target position, allowing the user to be unaware of the    event:  "click", //event triggered before loading      //event, value has click (click), mouseover (mouse over), sporty (sporty), Foobar (...). You can implement mouse over or click on the image to start loading, the latter two values are not tested ...   container: $ ( "#container"), //to the picture in a container to achieve the effect     //container, The value is a container. Lazyload by default when pulling the browser scroll bar, this parameter allows you to load the scroll bar of a div in turn, loading the picture   failurelimit: 10 //picture sorting Chaos      //Failurelimit, the value is a number. Lazyload by default when the first picture that is not in the visible area is found, the load does not continue. But when the HTML container is cluttered with images that are not loaded in the visible area, Failurelimit is intended to load images outside of the visible area to avoid this problem.});       

jquery pictures Lazy Loading plugin jquery.lazyload usage method (GO)