Lazy Load Image With Placeholder And Fallback – imagebuddy

Category: Image , Loading | July 25, 2020
Views Total:1,121 views
Official Page:Go to website
Last Update:July 25, 2020


Lazy Load Image With Placeholder And Fallback – imagebuddy


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:

How to use it:

Install and import the imagebuddy library.

$ 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.


Add a fallback image for browsers which have JavaScript disabled.

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

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

     data-ib-sources=" 320w 180h, 533w 300h, 854w 480h, 1280w 720h, 1440w 810h, 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.

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



  • v1.1.2


  • added check to skip loading hidden images

You Might Be Interested In:

Leave a Reply