Easy Image Lazy Loading with blazy.js

Preview:

Description:

blazy.js is a lightweight & easy-to-use script to delay the load of images until they enter the viewport. Helpful to save the bandwidth and reduce the server requests.

Basic Usage:

Include the blazy.js at the end of the document so the pages load faster.

<script src="blazy.min.js"></script>

Add a CSS class “b-lazy” to your placeholder images and save the the real image source in the data-src attribute.

<img class="b-lazy" data-src="loaded-image.jpg" src="placeholder.jpg" />

Initialization.

var bLazy = new Blazy();

That’s it. Here’re some options available.

var bLazy = new Blazy({
 // Multi-serve images based on screen size. Go to multi-serve image example
breakpoints: false,
// If you want to lazy load images inside a scrolling container change the default value to the selector of the container
container: window,
// Callback for when something goes wrong. There are two error messages, missing and invalid. You’ll get missing if no data-src is defined. Invalid if the data-src is invalid.
error: function(ele, msg),
// The classname an image will get if something goes wrong.
errorClass: 'b-error',
// The offset controls how early you want the images to be loaded before they’re visible. Default is 100, so 100px before an image is visble it’ll start loading.
offset: 100,
// Used if you want to pass retina images: data-src=”image.jpg|[email protected]”.
separator: '|',
// Callback for when an image has loaded. 
success: function(ele),
// The classname an image will get when loaded.
successClass: 'b-loaded,
// Image selector for images that should lazy load. If you want to lazy load all images write ‘img’. You can add multiple selectors separated with comma; ‘.b-lazy, .bLazy, .blazy’
selector: '.b-lazy',
// Attribute where the original image source can be found
src: 'data-src'	
});

Changelog:

10/23/2016

• v1.8.1