Today's Question:  What weekend projects have you created?        GIVE A SHOUT

Technical Article => Software =>  Open Source

Image lazy loading plugins on Github

  sonic0002      2017-04-22 01:16:04      2,231    0

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.

1
$ npm install layzr.js --save

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

1
import Layzr from 'layzr.js'

To use it, below code can be written.

1
2
3
4
5
6
const instance = Layzr({
  normal: 'data-normal',
  retina: 'data-retina',
  srcset: 'data-srcset',
  threshold: 0
})

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.

JAVASCRIPT OPEN SOURCE WEB DEVELOPMENT IMAGE LOADING

  SAVE AS PDF   MARK AS READ   MARK AS IMPORTANT

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious

  RELATED


  0 COMMENT


No comment for this article.


  WRITE ARTICLE

Client brief vs client budget

By sonic0002
Sometimes plans are quite different from realities. This is true especially in IT induestries. Usually when a client starts to present their plan, they have a really great vision. However when comes to the budget, the client runs into difficult.