Progressive Enhancement Resource Lazy Load Library – DemandJS

DemandJS is a modern, high-performance and progressive enhancement JavaScript lazy load library that delays the loading of web resources (e.g. images, videos, iframes) until they come into view.

Basic usage:

Import the compiled JavaScript file into the document.

<script src="demandjs.min.js"></script>

Initialize the DemandJS to lazy load all the images, videos and iframes within the document.

window.DemandJSDemanded = new DemandJS();

window.DemandJSDemanded = new DemandJS({
  demandClassAttribute: 'data-demand',
  defaultDemandClass: 'default',
  loadingHtml: '<div style="width:100%;height:100%">Loading In Progress</div>',
  failureHtml: '<div style="background-color:#F00;color:#FFF;font-size:20pt;">ERROR</div>',
  createLoadingNode: function createLoadingNode(t) {
    return _this4.createLoadingNode(t);
  },
  createFailureNode: function createFailureNode(t, ex) {
    return _this4.createFailureNode(t, ex);
  },
  shouldRemove: function shouldRemove(t) {
    return !('tagName' in t) || !t.tagName.match(/link/i);
  },
  shouldInsertOnLoad: function shouldInsertOnLoad(t) {
    return _this4.options.shouldRemove(t);
  },
  selector: 'img,video,picture,iframe,link.demand',
  ignoreSelector: '.nodemand',
  rootMargin: '48px',
  threshold: 0.001,
  onLoadBegin: function onLoadBegin(t) {
    return _this4.onLoadBegin(t);
  },
  onLoadSuccess: function onLoadSuccess(t) {
    return _this4.onLoadSuccess(t);
  },
  onLoadFailure: function onLoadFailure(t, e) {
    return _this4.onLoadFailure(t, e);
  },
  onLoadComplete: function onLoadComplete(t) {
    return _this4.onLoadComplete(t);
  },
  linkHandler: {
    'text/html': function textHtml(t, c) {
      return _this4.injectHtml(t, c);
    },
    'application/xhtml+xml': function applicationXhtmlXml(t, c) {
      return _this4.injectHtml(t, c);
    }
  }
});

Changelog:

v1.0.0-rc8 (12/13/2020)

• update resource offloading to target picture elements