Ability to set event before loading images
Visitors can "scroll to load" (default) or "click to load". "Click to load" activated by event click:
$("img.lazy").lazyload ({ event : "click"});
Ability to add effects, many effects to be used
All effects can be found here:
Ability to use with container, use plugin inside div:
This is an example:
C. For developers
Declare Lazy Load after jQuery declaration:
<script src="/jquery.js" type="text/javascript"></script>
<script src="/jquery.lazyload.js" type="text/javascript"></script>
For each loading of image, use CUSTOM img tag like this one:
<img class="lazy" src="/img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
->"src" is the image default before filled by actual image, it is simply an image 1px with one color.
->"data-original" is the actual atribute to place your image url
And remember to activate the lazyload:
$("img.lazy").lazyload();
D. Reference
For other examples, let visit this page:
There are links for downloading the script there, updated.
E. OUR TALK
Remember to check this demo for our SJ Education in reality with Lazy Load:
Don' forget that this template is now available in our Club, so let JOIN! to get it.
Thanks for reading.