Spectra – image gallery preloader

Hi @mohsinbsf

Thanks for your message. I’ve added a small Javascript snippet to my slideshow that does the trick for now. It doesn’t interfere with the original code but monitors any changes in the slideshow div classes. Basically, when ‘swiper-slide-next’ is added, the image is preloaded. This tweak has significantly improved the UX, so I hope you’ll consider incorporating something similar into the product roadmap permanently. I’ve included the code below in case it’s helpful for anyone else.

Thanks for considering this!

Best, Thomas

document.addEventListener("DOMContentLoaded", function () {
    function preloadImage(imgElement) {
        if (imgElement && imgElement.dataset.src && !imgElement.src) {
            imgElement.src = imgElement.dataset.src;
            imgElement.removeAttribute('data-src');
        }
    }

    var callback = function (mutationsList, observer) {
        for (var mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                var targetElement = mutation.target;
                if (targetElement.classList.contains('swiper-slide-next')) {
                    var imgElement = targetElement.querySelector('img');
                    preloadImage(imgElement);
                }
            }
        }
    };

    var observer = new MutationObserver(callback);
    var config = { attributes: true, subtree: true, attributeFilter: ['class'] };
    var targetNode = document.querySelector('.swiper-wrapper');
    if (targetNode) {
        observer.observe(targetNode, config);
    }
});