Image lazy loading plugins on Github

Image lazy loading is a concept where images are getting loaded only when needed. It has been adopted in many web applications to reduce usage of bandwidth. When a web page is loaded in a web browser, not all the page elements would be visible in the view port, hence those resources(images, videos etc) don't need to be loaded. 

Currently there are quite a few open source plugins on Github which can help achieve image lazy loading. Today we will introduce a few of them.

Echo.js

Echo.js is a standalone JavaScript image lazy loading plugin, it doesn't rely on any other third party library. Its size is around 2KB which is quite small.

When image element on the page is in the view port, its src attribute would be updated and it would load the image from the server asynchronously.

Using Echo.js is simple, to add an image directly into the page simply add a data-echo attribute to the img tag. Alternatively if you want to use Echo to lazy load background images simply add a `data-echo-background' attribute to the element with the image URL.

echo.init({
	offset: 100,
	throttle: 250,
	unload: false,
	callback: function (element, op) {
	  console.log(element, 'has been', op + 'ed')
	}
});

Lazyr.js

Lazyr.js is a small, fast and modern library for lazy loading images. Layzr intelligently chooses the best image source available based on an image's data attributes and browser feature detection.

Layzr was developed with a modern JavaScript workflow in mind. To use it, it's recommended you have a build system in place that can transpile ES6, and bundle modules.

Then import it into the file where you'll use it.

To use it, below code can be written.

The data-normal attribute will contain the normal resolution source. data-retina will contain the retina/high resolution source. Or you can add a source set which contains a set of sources with different resolutions.