MaksimBogachev

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.05
};

const lazyload = function(entries, observer) {
  entries.forEach(function(entry) {
    const target = entry.target;
    const dataset = target.dataset;

    if (entry.isIntersecting) {
      try {
        if ('src' in dataset) {
          target.src = dataset.src;
        }

        if ('bg' in dataset) {
          target.style.backgroundImage = `url(${dataset.bg})`;
        }

        target.classList.add('lazyloaded');
        observer.unobserve(target);
      } catch (error) {
        console.error(error);
      }
    }
  });
};

const observer = new IntersectionObserver(lazyload, options);

document.querySelectorAll('.js-lazyload').forEach(elem => observer.observe(elem));

<!-- Изображение без плейсхолдера -->
<img class="js-lazyload" data-src="path/to/image/elephant.jpg" alt="The pink elephant">

<!-- Изображение с плейсхолдером -->
<img class="js-lazyload" data-src="path/to/image/elephant.jpg" src="path/to/placeholder.jpg" alt="The pink elephant">

<!-- Ситуация, когда изображение надо задать как фон -->
<div class="js-lazyload" data-bg="path/to/image/elephant.jpg"></div>