Какие lazy load-плагины для изображений лучше?

Question

[MaksimBogachev]

Какие вы используйте плагины lazy load для изображений на постоянной основе?

Answer 1

[Сергей]

После появления Intersection Observer API надобность в плагинах отпала. Всё решается парой десятков строк кода.

Пример.

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>

Comments

[MaksimBogachev]

Есть ли в данном случае возможность создавать изображения-заглушки для изображений?

[Сергей]

Да, дополнил ответ.

[MaksimBogachev]

Сергей, большое спасибо, насколько я понимаю это API для работы с вьюпортами