Lazyload background images

lazyloadbg.js

const loadBackgroundImage = (element) => {
  if (typeof element.dataset.src === 'undefined') { return }
  const src = element.dataset.src
  element.style.backgroundImage = `url(${src})`
  element.removeAttribute('data-src')
}

const handleIntersection = (entries, observer) => {
  for(let i = 0; i < entries.length; ++i) {
    loadBackgroundImage(entries[i].target)
  }
}

const lazyloadObserver = new IntersectionObserver(handleIntersection)

const targets = document.querySelectorAll('.lazybgload[data-src]')

for(let i = 0; i < targets.length; ++i) {
  lazyloadObserver.observe(targets[i])
}

https://github.com/w3c/IntersectionObserver/tree/master/polyfill