Lazy Load (jQuery) | Responsive Web Design

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.

  • Resource Name

    Lazy Load (jQuery)

  • Resource Creator

    Mika Tuupola

Description

Lazy Load is a jQuery plugin written in JavaScript. It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.

View on Github Download Resource

Sites that use Lazy Load (jQuery)

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.