simple lazy load background image that resides inside a container

container.html

<div class="port-wrapper">
  <div class="lazy-image" data-src='/image1.jpg'></div>
  <div class="lazy-image" data-src='/image2.jpg'></div>
  <div class="lazy-image" data-src='/image3.jpg'></div>
 </div>

script.js

const images = [...document.querySelectorAll('.lazy-image')];

const interactSettings = {
  root: document.querySelector('.port-wrapper'),
  rootMargin: '0px 0px 200px 0px',
};

function onIntersection(imageEntites) {
  imageEntites.forEach(image => {
    if (image.isIntersecting) {
      observer.unobserve(image.target);
      image.target.setAttribute(
        'style',
        `background-image:url('${image.target.dataset.src}')`
      );
      //   image.target.src = image.target.dataset.src; //for <img> tag, remove image.target above
      image.target.onload = () => image.target.classList.add('loaded');
    }
  });
}

const observer = new IntersectionObserver(onIntersection, interactSettings);

images.forEach(image => observer.observe(image));