Lazy Load Image With Placeholder And Fallback – imagebuddy

Preview:

Description:

imagebuddy is a pure JavaScript plugin for lazy loading images with support for custom placeholder and fallback.

It also supports responsive images that allow you to provide several additional image sources to help the browser pick the right one.

See also:

• Top 10 Lazy Loading JavaScript Libraries
• 10 Best lazy loading jQuery Plugins

How to use it:

Install and import the imagebuddy library.

# NPM
$ npm install imagebuddy --save

import ImageBuddy from 'imagebuddy'

Or directly load the bundled JavaScript in the document.

<script src="dist/imagebuddy-VERSION.bundle.min.js"></script>

Initialize the library and we’re ready to go.

const ib = new ImageBuddy();

Add the placeholder image to the src attribute of your image.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAJxAAAAABCAYAAAB43rQLAAAAQElEQVR42u3BAQ0AAAgDoJvc6HczBzBNNgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwDtsOwGAKz8gLwAAAABJRU5ErkJggg==">

Add a fallback image for browsers which have JavaScript disabled.

<noscript>
  <img src="fallback-image.jpg" alt="">
</noscript>

Add image sources to the data-ib-sources attribute. Done.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAJxAAAAABCAYAAAB43rQLAAAAQElEQVR42u3BAQ0AAAgDoJvc6HczBzBNNgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwDtsOwGAKz8gLwAAAABJRU5ErkJggg=="
     data-ib-sources="http://via.placeholder.com/320x180 320w 180h, http://via.placeholder.com/533x300 533w 300h, http://via.placeholder.com/854x480 854w 480h, http://via.placeholder.com/1280x720 1280w 720h, http://via.placeholder.com/1440x810 1440w 810h, http://via.placeholder.com/1920x1080 1920w 1080h"
>

Config the lazy load behavior using the following HTML data attributes:

• data-ib-lazyload: Enable/disable the lazy load on this element. 0 or 1.
• data-ib-lazyload-threshold: Set the lazy load threshold.
• data-ib-match-dpr: Whether to use the devicePixelRatio value of the browser as a multiplier when selecting image sizes. 0 or 1.
• data-ib-no-height: Restrict ImageBuddy from considering the height of an image when determining which image will be used. 0 or 1.
• data-ib-no-cache: Enable/disable image caching. 0 or 1.
• data-ib-ignore: Prevent an element from being processed during the initial processing and any subsequent .update() calls. 0 or 1.
• data-ib-ignore-hidden-check: Allow an element to be loaded even if one of its parents is not visible. 0 or 1.

You can also config the library in the JavaScript:

const ib = new ImageBuddy({
      debug: false,
      matchDPR: false,
      lazyLoad: true,
      lazyLoadThreshold: 100
});

Upload the library. Great for new images are added to the document.

ib.update({
  // options here
})

Execute a function when the library is updated.

ib.on('update', () => {
  // ...
});

Execute a function when the images are loaded.

ib.on('image-loaded', (el) => {
  console.log('image loaded', el);
});

Changelog:

07/25/2020

• v1.1.2

04/11/2020

• added check to skip loading hidden images