Lazy Loading Images with bLazy.js

bLazy is a great lazy loading image script that will let you lazy load and multi-serve images which will save bandwidth and server requests. The script is very beneficial for users as they will have faster load times and save data.

This script is great for websites that have a lot of image content as it is a very lightweight plugin – less than 1.2KB minified and gzipped.

Implementing bLazy is quite simple. In order to use it, you need to add the b-lazy class to the images and some data-attributes.

Have a look at the example below:

HTML

<img class="b-lazy"
src="placeholder-image.jpg"
data-src="image.jpg"
data-src-small="small-image.jpg"
alt="Image description" />

JavaScript
The script has to be included so the lazy loading fires up:

var bLazy = new Blazy({
breakpoints: [{
width: 420 // Max-width
, src: 'data-src-small'
}]
, success: function(element){
setTimeout(function(){
// We want to remove the loader gif now.
// First we find the parent container
// then we remove the "loading" class which holds the loader image
var parent = element.parentNode;
parent.className = parent.className.replace(/\bloading\b/,'');
}, 200);
}
});

See bLazy in action:

See the Pen bLazy.js – basic example by dinbror (@dinbror) on CodePen.

For details and options, visit http://dinbror.dk/blog/blazy/