Как лениво загружать картинки?

Question

Я пытаюсь найти способ ленивой загрузки изображений на свой веб-сайт, потому что у меня будет большая галерея изображений, поэтому я не хочу иметь никаких проблем с производительностью. Я слежу за онлайн-уроками, где они заменяют sr c на data-sr c, но из-за этого у меня битая ссылка. Можно ли сделать ленивую загрузку, если у меня есть встроенная световая галерея?

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll("img.lazy");
  var lazyloadThrottleTimeout;

  function lazyload() {
    if (lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }

    lazyloadThrottleTimeout = setTimeout(function() {
      var scrollTop = window.pageYOffset;
      lazyloadImages.forEach(function(img) {
        if (img.offsetTop < (window.innerHeight + scrollTop)) {
          img.src = img.dataset.src;
          img.classList.remove('lazy');
        }
      });
      if (lazyloadImages.length == 0) {
        document.removeEventListener("scroll", lazyload);
        window.removeEventListener("resize", lazyload);
        window.removeEventListener("orientationChange", lazyload);
      }
    }, 20);
  }

  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
});

<div class="row gallery-container" id="lightgallery">
  <div class="col-sm-6 col-md-4 col-lg-4 col-xl-3 item img-gallery center-images-tattoo image-box" data-aos="fade" data-src="images/tattoo/IMG_1086.jpg" data-sub-html="<h4>Fading Light</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor doloremque hic excepturi fugit, sunt impedit fuga tempora, ad amet aliquid?</p>">
    <a href="#"><img data-src="images/tattoo/IMG_1086.jpg" alt="Tattoo-image" class="img-fluid img-resize2 lazy"></a>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-4 col-xl-3 item img-gallery center-images-tattoo image-box" data-aos="fade" data-src="images/tattoo/IMG_1089.jpg" data-sub-html="<h4>Fading Light</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam omnis quaerat molestiae, praesentium. Ipsam, reiciendis. Aut molestiae animi earum laudantium.</p>">
    <a href="#"><img data-src="images/tattoo/IMG_1089.jpg" alt="Tattoo-image" class="img-fluid img-resize2 lazy"></a>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-4 col-xl-3 item img-gallery  center-images-tattoo image-box" data-aos="fade" data-src="images/tattoo/IMG_1090.jpg" data-sub-html="<h4>Fading Light</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem reiciendis, dolorum illo temporibus culpa eaque dolore rerum quod voluptate doloribus.</p>">
    <a href="#"><img data-src="images/tattoo/IMG_1090.jpg" alt="Tattoo-image" class="img-fluid img-resize2 lazy"></a>
  </div>

Answer 1

Как насчет скрытия незагруженных изображений из DOM с помощью CSS?

img.lazy {
    display: none;
}