Beren.it

All that you can leave behind

Visualizzare una progress bar animata con Javascript dopo un submit

Visualizzare una progress bar animata con Javascript dopo un submit

Riporto qui una libera traduzione di un post interessante sull'argomento. Infatti in alcuni casi, specie quando la sottomissione di una pagina richiede tempi di processamento piuttosto lunghi, è utile visualizzare un'immagine che dia l'impressione che l'applicazione stia lavorando e non sia bloccata. Ciò può essere ottenuto semplicemente con un Javascript e una gif animata.
Un sito molto carino da cui è possibile con un paio di click generare un'icona di caricamento in maniera personalizzata è : www.ajaxload.info.
Vediamo ora invece in dettaglio come scriver il codice per ottenere il comportamento voluto.
Anzitutto settiamo la visibilità di testo ed immagine a hidden.

[ASPX/HTML]

<p style="visibility:hidden;" id="progress">
<img id="progress_image" style="padding-left:5px;padding-top:5px;" 
              src="images/ajax-loader.gif" alt="Operation in progress..." />
              Operation in progress...
</p> 

 

A questo punto scriviamo la funzione javascript che esegue la visualizzazione della progress bar.

[javascript]

function loadsubmit(){
      ProgressImage = document.getElementById('progress_image');
      document.getElementById('progress').style.visibility = 'visible';
      setTimeout('ProgressImage.src = ProgressImage.src',100);
      return true; 
}

 

La funzione setTimeout è necessaria per IE6 e IE7. Infatti IE termina le animazioni dell gif alla sottomissione. Quindi la chiamata della funzione di timeout avviene prima della sottomissione della form (return true), ma i suoi effetti, grazie al timeout, si verificheranno dopo. A questo punto non ci resta che invocare la funzione javascript sull'evento OnClick del tasto di sottomissione, in questo modo:

[ASPX/HTML]

<input onclick="return loadSubmit();" 
              src="images/submitinfo_btn.jpg" type="image" />