如何延迟加载图像？

Question

I'm trying to find a way to lazy load images on my website, because I'll be having a big gallery of images so I don't want to have any performance issues. I'm following tutorials online where they replace src with data-src but that leaves me with a broken link. Is it possible to do a lazy loading like that if I have a lightgallery integrated?

 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

How about hiding the non-loaded images from DOM with CSS?

img.lazy {
    display: none;
}