How integrate Lazy load image in sachinchoolur/lightGallery

Question

I had added loader before load the actual image, it works for normal images but when I open the light box thumb should have actual images but still showing that loader.gif. the result should be like when I open the light box then the thumbnails of the light box should be loaded with the actual image. right now it's showing load.gif I tried with addEventListener so when the light box opens at that time we can call lazyload function but no success.

my code is :

<div class="col-sm-12 col-md-4 medum-device-padding-lr-5 lightgallery" id="lightgallery1">
    <a  href="1.jpg" title="Click to enlarge">
    <img src="1.jpg" data-src="1.jpg" alt="cars">
    </a>
    <a href="2.jpg" title="Click to enlarge" style="display: none;">
    <img src="loading.gif" data-src="2.jpg" alt="cars">
    </a>
</div>

    $('.lightgallery').lightGallery({
        lgThumbnail: true,
        download: false,
        share: false,
        getCaptionFromTitleOrAlt: false,
        rotate: false,
        flipHorizontal: false,
        flipVertical: false,
        actualSize: false,
        fullScreen: false
    });
    //lazy laoding 
    var lazyloadImages;
    if ("IntersectionObserver" in window) {
        lazyloadImages = document.querySelectorAll(".lazy");
        var imageObserver = new IntersectionObserver(function (entries, observer) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    var image = entry.target;
                    image.src = image.dataset.src;
                    image.classList.remove("lazy");
                    imageObserver.unobserve(image);
                }
            });
        });

        lazyloadImages.forEach(function (image) {
            imageObserver.observe(image);
        });
    } else {
        var lazyloadThrottleTimeout;
        lazyloadImages = $(".lazy");

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

            lazyloadThrottleTimeout = setTimeout(function () {
                var scrollTop = $(window).scrollTop();
                lazyloadImages.each(function () {
                    var el = $(this);
                    if (el.offset().top - scrollTop < window.innerHeight) 
                    {
                        var url = el.attr("data-src");
                        el.attr("src", url);
                        el.removeClass("lazy");
                        lazyloadImages = $(".lazy");
                    }
                });
                if (lazyloadImages.length == 0) {
                    $(document).off("scroll");
                    $(window).off("resize");
                }
            }, 20);
        }

        $(document).on("scroll", lazyload);
        $(window).on("resize", lazyload);
    }

any suggestion will be apriciated thanks in advance

Answer 1

You can use the preload option, on lightgallery initialization. Here's their API describing this option.

Example -

$('.lightgallery').lightGallery({
    preload: 1
});