Lazy Load Image With Placeholder And Fallback – imagebuddy

Category: Image , Loading | April 24, 2019
Author: dougfrei
Views Total: 116
Official Page: Go to website
Last Update: April 24, 2019
License: MIT

Preview:

Lazy Load Image With Placeholder And Fallback – imagebuddy

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:

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.

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

You Might Be Interested In:


Leave a Reply