Feature Request: data-background-image responsive images with data-srcset

Currently I use various media queries to include a different background image as needed, and being able to apply lozad to achieve the same result would be great 😃.

I wish you could define various background images per screen size in the same way you can for responsive images:

<!-- background image example -->
<div class="lozad" data-background-image="image.png" data-srcset="image.png 1000w, image-2x.png 2000w">
</div>

[darrenjacoby]

I also needed this, so got a version of it working.

I can now pass in data-background-image-md, data-background-image-lg, etc, depending on breakpoint values that I define in the JS.

You need to re-write load from the original, the only thing changing here is this section;

if (item.getAttribute('data-background-image')) {

}

If there is a better way to overwrite something in the existing load() function that would be helpful.

The rest remains as is, full example below;

const isIE = typeof document !== 'undefined' && document.documentMode

// breakpoints for backgrounds
let breakpoints = [
  {
    src: 'sm',
    width: 576,
  },
  {
    src: 'md',
    width: 768,
  },
  {
    src: 'lg',
    width: 992,
  },
  {
    src: 'xl',
    width: 1200,
  },
  {
    src: 'xx',
    width: 1400,
  },
];

// get screen size
let screen = document.documentElement.clientWidth;

// observer
let observer = lozad(el, {
  load: (item) => {
    // picture
    if (element.nodeName.toLowerCase() === 'picture') {
      const img = document.createElement('img')
      if (isIE && element.getAttribute('data-iesrc')) {
        img.src = element.getAttribute('data-iesrc')
      }
      if (element.getAttribute('data-alt')) {
        img.alt = element.getAttribute('data-alt')
      }
      element.appendChild(img)
    }

    // data-src
    if (item.getAttribute('data-src')) {
      item.src = item.getAttribute('data-src');
    }

    // data-srcset
    if (item.getAttribute('data-srcset')) {
      item.srcset = item.getAttribute('data-srcset');
    }

    // data-background-image
    if (item.getAttribute('data-background-image')) {

      // return a breakpoint that qualifies
      let breakpoint = breakpoints
        .filter(function(breakpoint) {
          // return if item is larger than screen width
          // return if data-background-image for the breakpoint exists
          if (screen >= breakpoint.width && item.getAttribute(`data-background-image-${breakpoint.src}`)) {
            return (breakpoint.src);
          }
        })
        // get the last item
        .pop();

      // default data-background-image
      let attr = item.getAttribute('data-background-image');

      // if a breakpoint qualified, then change the attr
      if (breakpoint) {
        attr = item.getAttribute(`data-background-image-${breakpoint.src}`);
      }

      // set the background-image css prop
      item.style.backgroundImage = `url(${attr})`;
    }

    // data-toggle-class
    if (item.getAttribute('data-toggle-class')) {
      item.classList.toggle(item.getAttribute('data-toggle-class'));
    }
  },
  loaded: (item) => {
    item.classList.add('lozad-loaded');
  },
});

// run
observer.observe();

[ApoorvSaxena]

we can document custom loading function to implement this behaviour to start with