Our templates use Lazy Load to speed up images loading

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:

jQuery Effects

Ability to use with container, use plugin inside div:

This is an example:

Container Lazy Load

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:

Lazy Load Project

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:

SJ Education

More example with Lazy Load

Don' forget that this template is now available in our Club, so let JOIN! to get it.

Thanks for reading.