Lazy Load (jQuery)

Lazy load lets you serve up an image heavy website without having to suffer with all the prefetching and loading of images that may never be seen by the user.

This is especially helpful for single page websites that are highly visual. One issue with this comes when someone opens the webpage in preparation of loading the site before losing their internet connection, but then will not get the benefit of any images below the fold.

Lazy Load depends on jQuery. Include them both in end of your HTML code:

<script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script>

You must alter your HTML code. Put the place holder image into
src attribute. Demo pages use 1×1 pixel grey gif.URL of the real image must be put into data-original attribute. It is good idea to give Lazy Loaded image a specific class. This way you can easily control which images plugin is binded to.

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">

then in your code do:

$("img.lazy").lazyload();

This causes all images of class lazy to be lazy loaded. See the basic options demo.