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

问题描述

我在加载实际图像之前添加了加载程序，它适用于普通图像，但是当我打开灯箱拇指时应该有实际图像但仍然显示 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);
    }

任何建议都会被接受 提前致谢

解决方法

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

示例 -

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