Lazy Load with CSS Backgound Image Support

CSS background images

You can now lazyload CSS background images. Bind the plugin to non image element and it will automatically change the background-image style attribute when element is scrolled into view. You can also use effects.

<div class="lazy" data-original="img/bmw_m1_hood.jpg" style="background-image: url('img/grey.gif'); width: 765px; height: 574px;"></div>

$("div.lazy").lazyload({
    effect : "fadeIn"
});

Optional placeholder image

The placeholder image is now optional. If you omit it plugin will use the default which is data uri grey png. One less http request to make.

<img class="lazy" data-original="img/example.jpg" width="765" height="574">

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

Download

Latest source or minified. Plugin has been tested with Safari 6, Chrome 30, Firefox 24 on OSX and IE8, IE9, IE10, IE11, Chrome 28 on Windows and Mobile Safari on iOS 7.02 and 6.1.3. Full changelog in GitHub.

Posted in JavaScript  on 15 Oct 2013.