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); } });