function loadImage(elem) {
  if (elem.tagName === 'PICTURE') {
    const sets = elem.querySelectorAll('[data-srcset]');
    const srcs = elem.querySelectorAll('[data-src]');

    sets.forEach(set => {
      set.srcset = set.dataset.srcset;
      delete set.dataset.srcset;
    });

    srcs.forEach(src => {
      src.src = src.dataset.src;
      delete src.dataset.src;
    });
  } else if (elem.tagName === 'IMG') {
    if (elem.dataset.src) {
      elem.src = elem.dataset.src;
      delete elem.dataset.src;
    }
  }
}

function loadImageObserver(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadImage(entry.target);
    }
  });
}

function lazyload() {
  const images = document.querySelectorAll('picture', 'img');

  if ('IntersectionObserver' in window) {
    const observer = new IntersectionObserver(loadImageObserver);
    images.forEach(image => observer.observe(image));
  } else {
    images.forEach(img => loadImage(img));
  }
}