Problema doppio caricamento immagine CSS / JS

[ivanisevic82]

Ciao a tutto, come da titolo, ho un problema da risolvere, che descrivo di seguito.

Nel sito che mi appresto a pubblicare ho delle slide in home page strutturate in modo tale che l'avvio del carosello parta solo dopo il completo caricamento della prima immagine.

Ecco il JS:

jQuery(document).ready(function ($) {

    let imagesLoaded = 0;


    function getActualImageUrl() {
        const baseUrl = 'miopercorso/images/nomeimmagine-';
        let imageSize;
        const screenWidth = window.innerWidth;
        const devicePixelRatio = window.devicePixelRatio;


        if (screenWidth <= 640) {
            imageSize = '640';
        } else if (screenWidth <= 1366) {
            imageSize = '1366';
        } else if (screenWidth <= 1920) {
            imageSize = '1920';
        } else if (screenWidth <= 2560) {
            imageSize = '2560';
        } else if (screenWidth <= 3840) {
            imageSize = '3840';
        } else {
            imageSize = 'max';
        }


        if (devicePixelRatio >= 2) {
            switch (true) {
                case screenWidth <= 640:
                    imageSize = '1366';
                    break;
                case screenWidth > 640 && screenWidth <= 1366:
                    imageSize = '2560';
                    break;
                case screenWidth > 1366 && screenWidth <= 1920:
                    imageSize = '3840';
                    break;
                case screenWidth > 1920:
                    imageSize = 'max';
                    break;
            }
        }


        return `${baseUrl}${imageSize}.webp`;
    }


    const images = [getActualImageUrl()];


    function imageLoaded() {
        imagesLoaded++;
        if (imagesLoaded === images.length) {
            initializeSlickCarousel();
            document.querySelector('.hero').style.opacity = '1';
            animateHeaderContainer();
        }
    }


    images.forEach(imgUrl => {
        const img = new Image();
        img.src = imgUrl;
        img.onload = imageLoaded;
    });


    function animateHeaderContainer() {
        const headerContainer = document.querySelector('#header_container');
        headerContainer.classList.add('headerAnimated');
        headerContainer.addEventListener('animationend', function() {
            this.classList.remove('headerAnimated');
            this.style.opacity = '1';
        }, { once: true });
    }


    function initializeSlickCarousel() {
        $('.hero').slick({
            dots: true,
            infinite: true,
            speed: 800,
            pauseOnHover: false,
            fade: true,
            cssEase: 'linear',
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 7000,
            draggable: false,
            arrows: false
        });


        $('.hero').on('afterChange', function (event, slick, currentSlide) {
            if (currentSlide === 0) {
                $('.hero-slide').removeClass('fade-in-first-load');
                $('.ClasseTitolo').removeClass('primo-ciclo');
                $('.ClasseSottotitolo').removeClass('primo-ciclo');
            }
            if (currentSlide === 1) {
                $(this).slick('slickSetOption', 'autoplaySpeed', 6000, true);
            }
        });
    }


});

Questo tuttavia determina un comportamento anomalo sulla prima slide.

Siccome la verifica del caricamento della prima immagine viene fatta via JS, l'immagine viene caricata via JS.

Al contempo tutte le immagini del carosello (compresa la prima), vengono caricate via CSS.

Questo determina che SOLO la prima immagine viene caricata due volte: una tramite JS (per la verifica di completo caricamento di cui sopra) ed una via CSS.

Potrei risolvere caricandole tutte esclusivamente via JS, ma questo non mi sembra conveniente, anche per ragioni SEO, oltre che di prestazioni e ottimizzazione.

Al contempo temo che non esiste un modo per verificare il caricamento della prima immagine via CSS e non via JS.

Per evitare il doppio caricamento quindi potrei eliminare la parte di codice che attende il caricamento della prima immagine per far partire il carosello, ma mi dispiacerebbe in quanto era stato implementato per evitare possibili risultati sgradevoli agli utenti con connessioni lente.

Vi viene in mente qualche soluzione per risolvere il problema di questo doppio caricamento?

Grazie per il supporto!