Image Lazy Loading Plugin lazyload use method

Image Lazy Loading plugin lazyload use method

First, how to use:

Lazy Load relies on jQuery. Introducing Files

<script type= "Text/javascript" src= "Jquery.js" ></script>

<script type= "Text/javascript" src= "Jquery.lazyload.js" ></script>

Settings for the basic properties of a picture

figure " width= "640" height= "480" data-original= "img/example.jpg "/>

Last use:

$ (function () {

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

});

Second, basic options:

1. Set a critical point

The default slice will appear on the screen when loaded . if you want to load the picture ahead of time ,  can set Threshold Options ,  Set Threshold to be $ make pictures on the distance screen $ pixels are loaded in advance .

$ ("Img.lazy"). Lazyload ({

threshold:200

});

2.set events to trigger loading

You can use jQuery events, such as click and mouseover. You can also use custom events.

$ ("Img.lazy"). Lazyload ({

Event: "Click"

});

3. Use special effects

By default, the plug-in waits for the image to fully load and call Show (). You can use any effect you want. The following code uses fadeIn (Fade-in effect).

$ ("Img.lazy"). Lazyload ({

Effect: "FadeIn"

});

4. Loading hidden images

to improve performance , Lazy Load hidden images are ignored by default .  if you want to load hidden pictures ,  please add skip_invisible set to false

$ ("Img.lazy"). Lazyload ({

Skip_invisible:false

});

Image Lazy Loading Plugin lazyload use method