polyfill for the loading="lazy" image attribute

loading_lazy_polyfill.js

/**
 * Simple polyfill for the loading="lazy" image attribute
 * based on gandalf458's idea @ https://tinyurl.com/ya2wlg93
 */
document.addEventListener('DOMContentLoaded', function () {
  if ('loading' in HTMLImageElement.prototype) {
    return
  }

  var images = Array.prototype.map.call(
    document.querySelectorAll('[loading="lazy"]'),
    function (image) {
      image.dataset.src = image.src
      image.removeAttribute('src')
      return image
    }
  )

  var checkImage = function (image, index) {
    if (
      image.getBoundingClientRect().top <
      window.scrollY + window.innerHeight
    ) {
      image.src = image.dataset.src
      delete image.dataset.src
    }

    return !image.src
  }

  var updateImages = function () {
    images = images.filter(checkImage)

    if (!images.length) {
      window.removeEventListener('scroll', updateImages)
    }
  }

  window.addEventListener('scroll', updateImages)
  updateImages()
})