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.


Before you leave

I know, another newsletter pitch - but hear me out. Most JavaScript newsletters are terrible. When's the last time you actually looked forward to getting one? Even worse, when's the last time you actually read one? We wanted to change that.

We call it Bytes, but others call it their favorite newsletter.

Delivered to 111,962 developers every Monday and Thursday