CARICAMENTO PARZIALE

ymod

Utente Attivo
14 Dic 2020
21
0
1
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

Utente Attivo
22 Feb 2014
578
22
28
Hai due soluzioni ( forse anche di più, ma io conosco solo queste :p 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.

JavaScript:
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ì:
HTML:
        <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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
J Caricamento parziale filmati Flash 0
R Cambiare il nome dell'immagine dopo caricamento ftp HTML e CSS 0
F Caricamento index rotto PHP 1
L Caricamento dominio con FTP già preesistente in rete Domini 2
R Caricamento immagine su cartella remota + mysql PHP 3
G Problema caricamento tabelle MySql da PhP PHP 0
N caricamento listini (Indesign) Webdesign e Grafica 0
X Dichiarare variabili solo al caricamento della pagina PHP 3
A Caricamento file csv MySQL 2
A [PHP] Caricamento database in array PHP 11
J [Javascript] Inserire un caricamento con animazione prima dell'esecuzione di un'azione Javascript 1
M [Javascript] Caricamento menu da file esterno Javascript 8
M [javascript] Aggiungere eventi al caricamento Javascript 0
F [HTML] Caricamento Audio con matching HTML e CSS 10
T [PHP] rendere facoltativo il caricamento di un file PHP 5
gandalf1959 caricamento jpg in database mysql PHP 1
L [PHP] Caricamento file multiplo PHP 3
giuseppe_123 [WordPress] problema installazione temi, plugin e caricamento immagini WordPress 5
B [PHP] Copiare testo da iframe dopo il caricamento? PHP 1
C [Javascript] Caricamento asincrono file esterno Javascript 0
Mauro Guardiani [PHP] script per caricamento video PHP 0
MarcoGrazia [Javascript] Sistema di caricamento dinamico in base allo scrolling Javascript 3
MarcoGrazia [Javascript] Loader fino a caricamento della pagina Javascript 1
F [HTML] caricamento iframe HTML e CSS 1
A [RISOLTO]Errore caricamento file php PHP 21
G [Javascript] rendere visibile un iframe dopo l'avvenuto caricamento del video che esso contiene Javascript 4
E [Javascript] div "si sposta" al caricamento della pagina web Javascript 2
Monital [PHP] Eliminare la Barra di caricamento file alla fine dell'esecuzione PHP 11
Fede72 PHP e caricamento immagini PHP 9
trattorino [Javascript] caricamento immagine con effetto fade Javascript 1
M Comportamento strano di questo script per caricamento file sql in database PHP 7
C Caricamento immagini PHP 12
I caricamento pagina PHP 1
G verifica caricamento foto originali su social network o sito di hosting immagini Discussioni Varie 3
A problema caricamento codice <iframe video youtube PHP 3
M Caricamento script php pagina bianca Javascript 2
C Attendere caricamento pagina prima di autologin Javascript 4
E Realizzare una finestra overlay con caricamento pagina html HTML e CSS 3
P Diminuire il tempo di caricamento JOOMLA Joomla 0
S Generare pagina dopo il caricamento di un dato PHP 6
S Problema con il caricamento di un'immagine su aruba Hosting 11
felino Lentezza all'apertura e al caricamento della pagina, anche in backend WordPress 1
A Caricamento dei Javascript nel window.onload Javascript 3
B Problema caricamento files con FTP Hosting 5
lucolo Caricamento pagina infinito HTML e CSS 1
I caricamento file PHP 12
P messaggio caricamento in corso Javascript 4
voldemort Caricamento Bitmap da SD Sviluppo app per Android 0
S Lentezza caricamento video sul sito Hosting 2
G Attesa caricamento pagina PHP 0

Discussioni simili