[be]Lazy.js

» A lazy loading and multi-serving image script «

Download bLazy v 1.6.2
2016.05.09 - LESS THAN 1.4KB
var bLazy = new Blazy({
    // options
});
		

What is bLazy? bLazy is a lightweight lazy loading image script (less than 1.2KB minified and gzipped). It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data loaded if he/she doesn't browse the whole page.
For a full list of options, functions and examples go to the blog post: http://dinbror.dk/blog/blazy.

The following example is a lazy loading multi-serving responsive images example with a image callback :) If your device width is smaller than 420 px it'll serve a lighter and smaller version of the image. When an image has loaded it removes the loader in the callback.

HTML:

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

    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);
        }
   });
		
Lazy load images image1
Lazy load images image2
Lazy load images image3
Lazy load images image4
Lazy load images small image1
Lazy load images small image2
Lazy load images image5
Lazy load images image6
Lazy load images image7