CARICAMENTO PARZIALE

[ymod]

Nel mio sito web ho una pagina home dove sono presenti vari blocchi di immagini. Sono tantissime e vorrei che me li caricasse tipo 20 alla volta, e quando scrollo in basso me ne carica altri 20.
C'è una funzione javascript capace di fare questo?

 

[otto9due]

Hai due soluzioni ( forse anche di più, ma io conosco solo queste uhaha ) che possono essere implementate anche entrambe per ottimizzare ancora di più.
La prima è quella di utilizzare un lazy loading, ovvero un sistema per cui le immagini vengono caricate solo quando entrano all'interno della porzione di schermo visualizzata dall'utente. In questo modo, si caricheranno pian piano non bloccando la pagina.
Altra cosa è quella di caricare proprio parti di dati arrivati alla fine della pagina tramite ajax;

Ti passo un codicino che ho modificato tempo fa unendo vari esempi trovati online per caricare le immagini e i video in lazy loading di immagini e video.

document.addEventListener("DOMContentLoaded", function () {
                // Definisco i target
                const targetsImg = document.querySelectorAll(".lazy-image");
                const targetsVid = document.querySelectorAll("iframe.lazy-video");

                // Se il Browser non è compatibile..
                if (!('IntersectionObserver' in window)) {
                    //Carico le immagini normalmente
                    function caricaImg(image) {
                        image.src = image.dataset.src;
                    }
                    targetsImg.forEach(caricaImg);

                    //Carico i video normalmente
                    function caricaVid(video) {
                        video.src = video.dataset.src;
                    }
                    targetsVid.forEach(caricaVid);

                    // Se il Browser è compatibile inizio..
                } else {
                    const options = {
                        threshold: [0, 0.5, 1]
                    }

                    /* ****** IMMAGINI LAZY LOAD***** */

                    //Instanzio observer per immagini
                    const observerImm = new IntersectionObserver(callbackImg, options);
                    targetsImg.forEach(target => observerImm.observe(target));

                    // Funzioni per le immagini
                    function fetchImage(url) {
                        return new Promise((resolve, reject) => {
                            const image = new Image();
                            image.src = url;
                            image.onload = resolve;
                            image.onerror = reject;
                        });
                    }

                    // Funzioni di callback
                    function callbackImg(entries) {
                        entries.forEach(entry => {
                            // calcolo la percentuale di sovrapposizione
                            const ratio = entry.intersectionRatio;
                            const element = entry.target;
                            // se l'elemento è visibile
                            if (ratio > 0) {
                                // rimuovo l'elemento dall'observer
                                observerImm.unobserve(element);
                                // recupero l'immagine e la carico a video
                                const src = element.dataset.src

                                fetchImage(src).then(() => {
                                    element.src = element.dataset.src;
                                });
                            }
                        });
                    }

                    /* ****** VIDEO LAZY LOAD***** */

                    //Instanzio observer per i video
                    const observerVid = new IntersectionObserver(callbackVid, options);
                    targetsVid.forEach(target => observerVid.observe(target));

                    // Funzioni di callback
                    function callbackVid(entries) {
                        entries.forEach(entry => {
                            // calcolo la percentuale di sovrapposizione
                            const ratio = entry.intersectionRatio;
                            const element = entry.target;
                            // se l'elemento è visibile
                            if (ratio > 0) {
                                // rimuovo l'elemento dall'observer
                                observerVid.unobserve(element);
                                // recupero l'elemento e lo carico a video
                                const src = element.dataset.src

                                element.src = element.dataset.src;

                            }
                        });
                    }

                }/*Fine else*/
            }); /*Fine event lister*/

Affinchè funzioni dovrai inserire le immagini e i video condivisi da you tube, ad esempio, così:

        <img class="lazy-image" data-src="https://www.xxxxx.net/images/tuolink/xxxxxxx.png"><br>
        <iframe  class="lazy-video" width="100%"  data-src="https://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>

Se hai problemi ti invio in privato una paginetta html funzionante. Così puoi vederlo in azione.