Organizzare homepage e priorità caricamento elementi

[ivanisevic82]

Ciao a tutti, avrei bisogno del vostro supporto.

Nella home page del sito che sto ultimando ho delle slide (3 immagini in tutto, con relativo testo animato con CSS per ognuna di esse) che si alternano in loop infinito, con dissolvenza incrociata al passaggio dall'una all'altra.

Sotto questa slide, nel resto della pagina, ci sono diverse altre immagini, che inizialmente sono fuori dallo schermo.

Ora, quando la connessione è veloce, sostanzialmente non si pongono problemi.

Mi piacerebbe tuttavia far si che le sembianze iniziali della pagina non siano alterate durante il caricamento, in caso di connessione particolarmente lenta.

Ho provato ad attivare il lazy loading, mi mette le immagini delle slide in priorità alta (e questo va bene), ma di fatto non risolve il problema.

Ciò che accade infatti è che prima viene visualizzata la struttura del sito, con le slide non sovrapposte ma affiancate verticalmente, in quanto evidentemente non ancora organizzate dal JS.
Inizia lo slide del testo in css e solo dopo (o durante) questa fase, cominciano a caricarsi le immagini, poco alla volta.

Ovviamente stiamo parlando della simulazione di una connessione particolarmente lenta con il devtool di chrome.

Ho eseguito lo stesso test su un sito che ha delle slide con testo animato simili alle mie, questo:

https://www.kmm.com/

Ho visto che qui, a differenza del mio sito, non viene visualizzato niente durante il caricamento, ma appare tutto in una volta.

Come si fa ad implementare qualcosa di simile?

Grazie per il supporto!

PS: Preciso una cosa: non voglio che TUTTA la pagina sia caricata quando è completa, ma SOLO le slide.

[KillerWorm]

Ciao, in linea di massima puoi definire il CSS in modo che le singole immagini o i loro involucri, o magari l'intero contenitore, abbia display:none.

Dal momento che, si suppone, il CSS viene incluso prima che sia eseguito lo script, le immagini dovrebbero restare "nascoste".

Ciò che dovrai fare, è individuare nello script un qualche evento (funzione) in cui lo slide risulta pronto, quindi potrai a quel punto riapplicare il display:block, o quel che è.

Questo a grandi linee.

[ivanisevic82]

Si...molto a "grandi linee".

Ci sono però diverse questioni che devo risolvere.

Elenco di serie una serie di cose che ho appurato e che generano di conseguenza delle domande.

1) L'animazione fade JS delle slide parte anche se le immagini non sono ancora caricate.
2) L'animazione CSS del testo parte anche se le immagini non sono ancora caricate.

Di consulenza bisogna far si che lo script e l'animazione CSS partano solo quando le immagini saranno caricate.
O - in alternativa - fino a quando non sarà caricata quantomeno la prima (dato che durante la sua "presenza" potranno caricare le altre due).

Sarei riuscito a trovare un modo per "bloccare" l'animazione JS, ma ho notato un'altra cosa.

Se blocco fino al caricamento delle immagini, queste ovviamente non si sovrappogono, ma si posizionano in fila una sotto l'altra (come da struttura html), spostando anche tutto il resto del contenuto del sito.

D'altra parte la soluzione "display:none" crea il problema opposto: sparisce anche lo "spazio vuoto" dedicato alle slide e il resto del sito sale in su.

Questo forse potrebbe risolversi dando un opacity:0 al posto del display:none?

Resterebbe però il problema delle immagini sovrapposte in altezza.

Si potrebbe dare un'altezza al contenitore, così che resti tale anche se le immagini (se pur "invisibili") dispongono una sotto l'altra?
Funzionerebbe?

Riguardo al CSS, anche in questo caso, può andare bene semplicemente "nasconderlo"?
Se si applica puramente e semplicemente un display:none, la loro animazione parte ugualmente?
Oppure il display:none inibisce tutto (credo di si ma ne vorrei conferma).

Per ora questi sono i miei dubbi, ora inizio con qualche tentativo...nel frattempo attendo riscontro e magari posto il codice appena riesco a fare una sorta di "demo".

[ivanisevic82]

Scusate il doppio post, ce l'ho fatta!

Questi sono stati i passaggi necessari:

- Dare opacity:0 al contenitore delle slide;
- Dare un'altezza al contenitore delle slide (per evitare gli spostamenti in alto o in basso descritti al post che precede);
- Modificare il JS in questo modo:

let imagesLoaded = 0;

const images = [
    'https://www.miosito/images/miaslide1.webp',
    'https://www.miosito/images/miaslide2.webp',
    'https://www.miosito/images/miaslide3.webp'
];
jQuery(document).ready(function ($) {


function imageLoaded() {
    imagesLoaded++;
    if (imagesLoaded === images.length) {
        // Inizializza il carousel prima di cambiare l'opacità del contenitore.
        initializeSlickCarousel();
        document.querySelector('.hero').style.opacity = "1";
    }
}


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


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


    $('.hero').on('afterChange', function (event, slick, currentSlide) {
        if (currentSlide === 0) {
            $('.hero-slide').removeClass('fade-in-first-load');
        }
    });
}


});

L'ultima parte del codice serve a far partire la prima slide con dissolvenza.

Ora avrei un'ultimo dubbio: potrebbe essere utile fare un preload solo sulla prima immagine?

In questo modo, avendo già il lazy load attivato, sarei sicuro che la prima slide viene visualizzata sostanzialmente subito, anche con connessioni lente, facendo così partire anche le animazioni collegate.

Oppure inserire un preload in questo contesto rischia di creare problemi o complicare troppo le cose?

Graze per supporto!

[ivanisevic82]

Scusate, piccolo aggiornamento, che necessità di supporto CSS.

Eventualmente spostate nell'apposita sezione del forum o ditemi se devo aprire un nuovo topic.

Il codice ha subito delle modifiche, lo riporto di seguito:

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

    let imagesLoaded = 0;


    const images = [
        'https://www.miosito.it/wp-content/themes/bonlawtemplate%2050/images/Accordo.webp',
        'https://www.miosito.it/wp-content/themes/bonlawtemplate%2050/images/Strada.webp',
        'https://www.miosito.it/wp-content/themes/bonlawtemplate%2050/images/Tribunale.webp'
    ];


    // Imposta l'opacità solo all'inizio, quando siamo sulla homepage
    if (document.body.classList.contains('home')) {
        document.querySelector('#header_container').style.opacity = "0";
    }


    function imageLoaded() {
        imagesLoaded++;
        if (imagesLoaded === images.length) {
            // Inizializza il carousel prima di cambiare l'opacità del contenitore.
            initializeSlickCarousel();
            document.querySelector('.hero').style.opacity = "1";
            document.querySelector('#header_container').classList.add('slick-active');       
        }
    }


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


    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'); // Rimuove la classe dopo il primo ciclo
                $('.ClasseSottotitolo').removeClass('primo-ciclo'); // Rimuove la classe dopo il primo ciclo
            }
            if (currentSlide === 1) {  // Quando inizia la seconda slide (gli indici iniziano da 0)
                $(this).slick('slickSetOption', 'autoplaySpeed', 6000, true);
            }
        });
    }


});

Principalmente quello che è cambiato è questo: ho inserito questa stringa

 document.querySelector('#header_container').classList.add('slick-active');   

che mi consente di aggiungere una classe all'elemento header_container al completo caricamento delle slide.

Questo l'ho fatto perché al caricamento vorrei realizzare un ulteriore effetto (oltre alla prima slide che appare in dissolvenza): ovverosia l'header_container (che contiene logo e menu del sito) che scende dall'alto verso il basso, con effetto dissolvenza.

Per fare ciò, lato css, ho inserito questo codice:

.home #header_container.slick-active {    animation-name: fadeInHeaderContainer;
    animation-duration: 1s;
    animation-fill-mode: forwards; 
    animation-delay: 0.5s;
}


@-webkit-keyframes fadeInHeaderContainer {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }


  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


@keyframes fadeInHeaderContainer {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }


  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

Funziona benissimo, se non fosse per un problema che si verifica SOLO su chrome.

All'intento dell'header_container come già specificato c'è il mio menu.
Nel menu c'è un submenu, il quale ha uno sfondo con effetto blur.

.header__menu .menu-item .sub-menu { letter-spacing: 1px; width: 395px; transform: translateX(-50%); left: 50%; position: absolute; margin-top: 30px; text-decoration: none; list-style-type: none; padding-right: 35px; padding-bottom: 12px; padding-top: 5px; padding-left: 15px;  font-size: 13px;background-color: rgba(233, 233, 233, 0.3);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0px 8px 6px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;

}

Su Chrome il blur non funziona più (mentre non da alcun problema su Firefox e Safari).

Ho provato ad eliminare il css con cui animo l'header_container o ad eliminare la stringa del JS con cui aggiungo la classe "slick-active": in entrambi i casi il blur torna a funzionare.

E' pertanto evidente che il problema si verifica quando si anima un elemento genitore dell'elemento col blur.

Ho fatto MILLE tentativi, ma non sono riuscito a risolvere in nessun modo.

Vi viene in mente qualche idea?

Grazie per il supporto!

[ivanisevic82]

Scusa il doppio post, ho risolto eliminando la classe che veniva aggiunga via JS, al termine dell'animazione dell'elemento header_container.