immagine loading nel salto pagina

[carky]

Buongiorno a tutti
sono qui a chiedervi aiuto e spero di aver scritto nella sezione giusta.

Ho una pagina con un pulsante che mi rimanda ad un'altra pagina che deve elaborare molti dati.
Ho pensato che al click del bottone questo sparisca facendo vedere una gif animata.

<div id='imgLoad'><a id='pInvio' type='button' name='Invia sospesi' onclick='loading(\"{$id}\");' >Invia sospesi</a></div>



function loading(id) {

var idrep =id;

document.getElementById('pInvio').style.visibility = "hidden";
document.getElementById('imgLoad').innerHTML = "<img style='vertical-align: middle;' src='images/loading.gif' alt='loading...' title='loading...' />Attendi qualche istante ...";
location.href = "pagina2.php?id="+idrep;
}



Fino a qui funziona ma l'immagine si blocca fin quando su pagina2 non ha finito di elaborare i dati.
Come posso fare per mantenere l'icona animata senza che si blocchi?

Grazie
Giovanni

[carky]

Ho risolto ugualmente processando i dati direttamente sulla prima pagina per poi passare alla seconda .
Rimango però curioso di sapere se posso mantenere attive gif animate sulla pagina finchè non ha finito di caricare la seconda.
Penso di no ma ringrazio chiunque mi possa levare la curiosità.

[KillerWorm]

Ciao, se la gif animata si fosse bloccata durante l'esecuzione di qualche JavaScript, ti avrei parlato più nel dettaglio del fatto che normalmente la gestione dei processi nei browser è single-threaded, con tutti gli annessi e connessi del caso.

Da ciò che hai indicato, però, la causa da ricercare è più semplice:

Ho una pagina con un pulsante che mi rimanda ad un'altra pagina che deve elaborare molti dati.
Ho pensato che al click del bottone questo sparisca facendo vedere una gif animata.
[...]
ma l'immagine si blocca fin quando su pagina2 non ha finito di elaborare i dati

E' più che altro una questione di logica: nel momento che il tuo browser va a caricare il nuovo documento, la pagina corrente viene "freezata" finché non viene mostrata la nuova pagina. Cioè, nel momento in cui il browser sta attendendo la risposta dal server, per l'apertura della nuova pagina, non solo le GIF animate si bloccano, ma presumibilmente non sarà consentita nessun'altra interazione su quella stessa pagina corrente.

In linea di massima il rendering delle GIF animate viene interrotto o per dare priorità alla gestione delle altre risorse in esecuzione.

Tuttavia questo comportamento è differente da browser a browser perché ciascuno di essi ha un proprio metodo di gestione dei processi.

Nella maggior parte dei casi una valida soluzione può essere quella di usare un'animazione CSS al posto di una GIF.
L'esecuzione del CSS infatti dovrebbe non interrompersi in questi casi.

Ad ogni modo, alcuni browser potrebbero comunque mostrare la pagina bianca dopo che è stata avviata l'apertura del nuovo documento, fintanto che questo non sia visualizzato nella pagina. In tal caso anche mostrare un'animazione sulla pagina potrebbe risultare totalmente inutile.

Ho risolto ugualmente processando i dati direttamente sulla prima pagina per poi passare alla seconda

invece A seconda dei casi potrebbe essere più "elegante" usare dei caricamenti asincroni, cioè attraverso chiamate AJAX, così da mantenere l'eventuale controllo sulla pagina stessa durante il caricamento degli altri contenuti... ma questo è già qualcosa di più elaborato e non so se sia una soluzione adatta nel tuo specifico caso.

Per il momento prova magari con un'animazione CSS e fai sapere.
Buon proseguimento.

[carky]

infatti avevo risolto con ajax
grazie del tuo tempo

[KillerWorm]

Perfetto, ma in tal caso, se i dati sono processati lato server e non client, le gif animate non dovrebbero comunque bloccarsi. Se accade, presumo tu abbia una lunga elaborazione lato client, dove entra allora in gioco il discorso del single-threaded accennato inizialmente.

In tal caso ci sono comunque diverse alternative: una è appunto l'uso di un'animazione CSS come già spiegato: un'altra può essere l'uso dei Web Worker, di cui faccio solo un accenno.