problema con preload immagini javascript

[sheldon]

Il sottostante codice che ho scritto, dovrebbe, sotto chiamata alla funzione "precarica" tramite pulsante, caricare delle immagini e, mentre lo fa, mostrare lo status di caricamento, con immagini caricate e percentuale. Ora, non capisco perché se premo il pulsante mi dà subito che ha caricato tutte le immagini. Sicuramente non le ha caricate tutte, perché sono più di 1000 e quando, al posto di utilizzare questo codice, mettevo semplicemente il ciclo for mostrato come secondo codice, ci metteva circa un minuto a caricare e poi iniziava l'animazione delle immagini (non inserita nel codice perché superflua). Se provo ad avviare l'animazione subito dopo il caricamento con il codice nuovo, questa si avvia ma si blocca a un certo punto, perché in realtà non ha caricato tutte le immagini. Avete idee? Grazie

                function precarica(){
                    imgObj = document.getElementById("imgSwap");
                    imgObj.src = "http://www.romaeurmeteo.it/images/caricamento.jpg";    
                    for(i=min; i < tot; i=i+dx) {
                        imgO[i] = new Image();
                        imgO[i].src = Pic[i];
                        percentuale = Math.round(imgindex/da_caricare*100);
                        car = document.getElementById("loading");
                        car.innerHTML = "Immagini caricate: "+imgindex+"/"+da_caricare+" ("+percentuale+"%)";
                        imgindex++;
                    }
                    car = document.getElementById("loading");
                    car.innerHTML = "Immagini caricate: "+da_caricare+"/"+da_caricare+" ("+percentuale+"%)";
                    imgObj = document.getElementById("imgSwap");
                    imgObj.src = imgO[currImg].src;
                    load_button = document.getElementById("load_button");
                    load_button.innerHTML = "caricamento effettuato!";
                }
                
                window.onload=function() {     
                    imgObj = document.getElementById("imgSwap");
                    imgObj.src = "http://www.romaeurmeteo.it/images/caricamento.jpg";    
                    vel_txt = document.getElementById("vel");
                    vel_txt.innerHTML = "Velocit&agrave; animazione: "+fps+" fps";
                    percentuale = Math.round(imgindex/da_caricare*100);
                    car = document.getElementById("loading");
                    car.innerHTML = "Immagini caricate: "+imgindex+"/"+da_caricare+" ("+percentuale+"%)";
                    load_button = document.getElementById("load_button");
                    load_button.innerHTML = load_button_txt;
                }

				for(i=min; i < tot; i=i+dx) {
					imgO[i] = new Image();
					imgO[i].src = Pic[i];
				}

[LeleFT]

Java non è JavaScript.

Sposto nel forum JavaScript.


Ciao.

[sheldon]

nessuna idea?
grazie dell'attenzione

[sheldon]

Provo a porre il problema in un'altra maniera:

ho uno script che mostra il time-lapse delle immagini catturate da una webcam, il quale necessariamente ha bisogno che le immagini (un migliaio, per un totale di circa 100-150 MB), vengano prima caricate, altrimenti il time-lapse andrebbe a scatti.
Ora, per il preload utilizzo il seguente semplicissimo codice:

for(i=min; i < tot; i=i+dx) {

                    imgO[i] = new Image();

                    imgO[i].src = Pic[i];

                } 

quando avvio lo script, il browser inizia a caricare e dopo un po' parte il time-lapse. Quello che vorrei fare è mostrare una barra di avanzamento del caricamento delle immagini. Esiste un modo semplice per farlo?
Grazie

[M4V1]

Puoi usare delle librerie JS già pronte come:

https://kimmobrunfeldt.github.io/progressbar.js/
https://loading.io/progress/

Immaginando di avere un progresso in percentuale, prendi la variabile tot e dividi 100 per tot, così da avere il valore del tuo incremento dell'1%.

A questo punto ad ogni iterazione per caricare le immagini usi la libreria che hai scelto per settare il valore della barra partendo da 0 e incrementando ogni volta del valore di 100/tot.

[sheldon]

Puoi usare delle librerie JS già pronte come:

https://kimmobrunfeldt.github.io/progressbar.js/
https://loading.io/progress/

Immaginando di avere un progresso in percentuale, prendi la variabile tot e dividi 100 per tot, così da avere il valore del tuo incremento dell'1%.

A questo punto ad ogni iterazione per caricare le immagini usi la libreria che hai scelto per settare il valore della barra partendo da 0 e incrementando ogni volta del valore di 100/tot.

Ciao, grazie della risposta. Ho provato ad installare la barra proposta nel sito https://loading.io/progress/:
Per il preload utilizzo il seguente codice:

				for(i=min; i < tot; i=i+dx) {


						imgO[i] = new Image();


						imgO[i].src = Pic[i];


						percentuale = Math.round(imgindex/da_caricare*100);


						bar1.set(percentuale);


						imgindex++;


				}

C'è però un problema: in pratica la barra va subito al 100%, mentre invece le varie immagini si caricano più lentamente (lo vedo dal browser che segnala il progresso del caricamento della pagina). Come posso fare per "sincronizzare" lo scaricamento delle immagini nella cache e la barra della percentuale?

[U235]

Ciao, grazie della risposta. Ho provato ad installare la barra proposta nel sito https://loading.io/progress/:
Per il preload utilizzo il seguente codice:

                for(i=min; i < tot; i=i+dx) {


                        imgO[i] = new Image();


                        imgO[i].src = Pic[i];


                        percentuale = Math.round(imgindex/da_caricare*100);


                        bar1.set(percentuale);


                        imgindex++;


                }

C'è però un problema: in pratica la barra va subito al 100%, mentre invece le varie immagini si caricano più lentamente (lo vedo dal browser che segnala il progresso del caricamento della pagina). Come posso fare per "sincronizzare" lo scaricamento delle immagini nella cache e la barra della percentuale?

Prova questo
post originale