[madeas]

Добрый день!

Делаю сайт без библиотек, все на нативном js. Необходимо добавить ленивую загрузку изображений. Нашел три работающих и в то же время простых варианта загрузки:

Изображения в таком формате

<figure>
    <img data-src="https://source.unsplash.com/random/500x300?1" src="https://via.placeholder.com/500x300">
</figure>

где, src - placeholder, data-src - изображение

1 вариант

function isVisible(elem) {
  let
    coords = elem.getBoundingClientRect(),
    windowHeight = document.documentElement.clientHeight,
    topVisible = coords.top > 0 && coords.top < windowHeight,
    bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;

  return topVisible || bottomVisible;
}

function isVisible(elem) {
  let coords = elem.getBoundingClientRect();
  let windowHeight = document.documentElement.clientHeight;

  let extendedTop = -windowHeight;
  let extendedBottom = 2 * windowHeight;

  // top visible || bottom visible
  let topVisible = coords.top > extendedTop && coords.top < extendedBottom;
  let bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;

  return topVisible || bottomVisible;
}

function showVisible() {
  for (let img of document.querySelectorAll('img')) {
    let realSrc = img.dataset.src;
    if (!realSrc) continue;
    if (isVisible(img)) {
      img.src = realSrc;
      img.dataset.src = '';
    }
  }
}

window.addEventListener('scroll', showVisible);
showVisible();

2 вариант

showPicture();

function showPicture() {
  let scrolled = window.pageYOffset || document.documentElement.scrollTop;
  let pics = document.querySelectorAll('[data-src]');
  for (i = 0, lengthPics = pics.length; i < lengthPics; i++) {
    var elemTop = pics[i].getBoundingClientRect().top;
    if (scrolled + document.documentElement.clientHeight > elemTop) {
      pics[i].setAttribute('src', pics[i].getAttribute('data-src'));
      pics[i].removeAttribute("data-src");
    }
  }
}
window.onscroll = showPicture;

3 вариант

window.scrollBy(0, 1);
let images = document.querySelectorAll('img');
window.onscroll = function(e) {
  for (var i = 0; i < images.length; i++) {
    if (images[i].getBoundingClientRect().top + pageYOffset < document.documentElement.scrollTop + document.documentElement.clientHeight - 100) {
      images[i].src = images[i].getAttribute('data-src');
    }
  }
}

Подскажите, какой вариант лучше выбрать и какие могут быть минусы? Не будет ли проблем, если js не сработает по какой-либо причине?
Если у вас другой вариант, буду рад.