如何在 sachinchoolur/lightGallery 中集成延迟加载图像

Question

我在加载实际图像之前添加了加载程序，它适用于普通图像，但是当我打开灯箱拇指应该有实际图像但仍显示 loader.gif。 结果应该就像我打开灯箱时那样，灯箱的缩略图应该加载实际图像。现在它显示 load.gif 我试过 addEventListener 所以当灯箱打开时我们可以调用lazyload函数但没有成功。

我的代码是：

<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);
    }

任何建议都会被采纳 提前致谢

Answer 1

您可以在灯光图库初始化时使用preload 选项。这是他们的API 描述此选项。

例子-

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