Simulazione dell'effetto Loading di Flash col Dhtml

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Comparso su HTML.it il 3 Febbraio 2003 - E' vietata la riproduzione, anche parziale, senza esplicito consenso dell'autore

Introduzione

La maggior parte dei siti che fanno dell'impatto grafico il loro punto di forza, adottano come introduzione un filmato animato, spesso realizzato in Flash, che mostra lo status grafico e percentuale del caricamento, effetto descritto denominato ...Loading.

Realizzare un simile meccanismo di attesa in Flash è semplice, basta utilizzare gli strumenti visuali messi a disposizione dal programma, ed in pochi click il gioco è fatto. Dietro a questi click si celano degli script capaci di memorizzare in una serie di variabili le operazioni compiute dal Flash developer in questione, ed offrire il risultato bello e pronto.

Quello che andiamo a realizzare in questo Articolo non è nulla che sia legato direttamente a Flash, ma che lo simuli, creando il suddetto effetto ...Loading.

La pagina iniziale dell'animazione

Il nostro scopo, come predetto, è quello di realizzare una semplice animazione di attesa per i visitatori della nostra Homepage.
Creiamo quindi due differenti file, uno che verrà lanciato per primo e che mostrerà l'animazione; l'altro che conterrà effettivamente i contenuti della Homepage.
Ipotizziamo quindi che i file in questione si chiamino index.html (o il file che per default si apre lanciando il vostro sito) che contiene l'animazione, e homepage.html a cui verrà effettuato il redirect al termine dell'animazione.

Concettualizzazione tecnica dell'effetto

Trattandosi di un effetto grafico quello che andiamo a realizzare, no possiamo trascurare una corretta e pulita, nonchè accattivante formattazione e stilizzazione dei layers utilizzati per l'effetto; alla fine dell'Articolo, infatti, riporterò il codice della pagina index.html contenente l'effetto così come l'ho immaginata io, per ora analizziamo tecnicamente tutto quello di cui abbiamo bisogno.

Iniziamo col pensare a dove e come disegnare i tre layers che ci interessano, li realizzeremo in verticale, uno che riporti la scritta ...Loading, uno che mostri la barra di stato del caricamento, ed uno che riporti il tempo di caricamento in percentuale, da 0% al 100%.

Seconda cosa che ci necessita è un foglio di stile Css mirato, creato ad hoc in modo da dare un colore alla barra di stato nella parte ancora non raggiunta dall'avanzamento, ed una per l'avanzamento stesso.

Terza cosa, lo script che generi lo stato di avanzamento della barra di stato e della percentuale di caricamento, ed il redirect verso la reale Homepage del sito.

Predisposizione dei layers

Creiamo una tabella contenente i layers che ci interessano al centro della pagina, assegnando ai vari componenti le rispettive classi ed identificatori univoci che ci serviranno in fase di realizzazione del foglio di stile e dello script:

<table width="222" align="center" cellpadding="1" cellspacing="10">
 <tr>
   <td class="loading">...Loading</td>
 </tr>
 <tr>
   <td class="barra"><div id="barra"></div></td>
 </tr>
 <tr>
   <td><div id="percentuale"></div></td>
 </tr>
</table>
I nomi delle classi e degli identificatori sono abbastanza espliciti e finalizzati ad una semplice comprensione del loro impiego; nel prossimo paragrafo esamineremo il foglio di stile in cui faremo riferimento a quanto inizializzato in questo blocco di codice Html.

Il foglio di stile Css

L'utilizzo ed il funzionamento del foglio di stile per l'effetto in questione è già stato discusso nel corso dei paragrafi precedenti; il codice è altamente personalizzabile nello stile e nei colori, quello riportato nell'esempio di seguito è solo indicativo e finalizzato a dare concretezza al suo materiale impiego:
<style type="text/css">
 td.loading { text-align: Center; color: #778899; font: Bold 11px Verdana; }
 td.barra { background-color: #F9F9F9; border: Solid 1px #CCCCCC; }
 #barra { background-color: #EEEEEE; }
 #percentuale { text-align: Center; color: #778899; font: Bold 10px Verdana; }
</style>
Lo script per il funzionamento dell'effetto

Come già detto nei paragrafi precedenti, lo script in questione si divide in tre parti:
  1. la routine che riempie la barra di stato dello stato di avanzamento durante il caricamento
  2. la routine che incrementa automaticamente e simultaneamente la percentuale di avanzamento
  3. la routine che effettua il redirect al file homepage.html alla fine dell'effetto
Vediamolo in pratica:
<script language="javascript" type="text/javascript">
 <!--
  // Inizializza lo stato di avanzamento grafico
  var espandi = 0;
      // Funzione che definisce le prime due operazioni descritte in precedenza
      function Loading() {
         // Incrementa la barra di stato dell'avanzamento
         barra.style.width = espandi;
         espandi++;
         // Incrementa il contatore percentuale dell'avanzamento
         percentuale.innerHTML = Math.round(espandi / 2) + "%";
            if (espandi != 200) {
                window.setTimeout("Loading(), 10");
            }
      }
      // Effettua un semplice redirect a tempo al termine dell'esecuzione dell'effetto
      function Go() {
         location.href = "homepage.html";
      }
      window.setTimeout("Go()", 12000);
 //-->
</script>
Il codice è molto semplice sintatticamente parlando, ma è importante capire il ragionamento sviluppato.
L'identificativo espandi assegnato al layer della barra di stato viene dotato di un comando di stile Javascript in cui si definisce la larghezza del layer; la sua dinamizzazione avviene incrementando il suo valore iniziale con il semplice codice
espandi++
All'identificativo percentuale, invece, viene assegnata una temporizzazione che incrementa il suo valore numerico iniziale, ovvero lo stesso valore assegnato alla variabile espandi, impostata su zero; il suo valore viene parserizzato con la funzione matematica Math.round che arrotonda ad interi i numeri decimali (si sarebbe potuto utilizzare anche il metodo parseInt).

La funzione Go(), come descritto nel commento al codice, effettua un semplice redirect temporizzato verso il file homepage.html al termine dell'esecuzione dell'effetto, e viene lanciata direttamente nel bloccoodi script.

La funzione Loading(), invece, verrà lanciata all'interno del corpo dello script:
<body onLoad="Loading()">
Il codice completo

Di seguito propongo il codice completo dell'effetto, così come l'ho immaginato io:
<html>
 <head>
  <title>Simulazione dell'effetto Loading di Flash col Dhtml</title>
  <style type="text/css">
   td.loading { text-align: Center; color: #778899; font: Bold 11px Verdana; }
   td.barra { background-color: #F9F9F9; border: Solid 1px #CCCCCC; }
   #barra { background-color: #EEEEEE; }
   #percentuale { text-align: Center; color: #778899; font: Bold 10px Verdana; }
  </style>
  <script language="javascript" type="text/javascript">
   <!--
    var espandi = 0;
        function Loading() {
           barra.style.width = espandi;
           espandi++;
           percentuale.innerHTML = Math.round(espandi / 2) + "%";
              if (espandi != 200) {
                  window.setTimeout("Loading(), 10");
              }
        }
        function Go() {
           location.href = "homepage.html";
        }
        window.setTimeout("Go()", 12000);
   //-->
  </script>
 </head>
<body topmargin="150" onLoad="Loading()" scroll="No">

<table width="222" align="center" cellpadding="1" cellspacing="10">
 <tr>
   <td class="loading">...Loading</td>
 </tr>
 <tr>
   <td class="barra"><div id="barra"></div></td>
 </tr>
 <tr>
   <td><div id="percentuale"></div></td>
 </tr>
</table>

</body>
</html>
C'è un'aspetto da chiarire: i tempi di attesa del caricamento sono strettamente legati alle proporzioni dei layers e della tabella contenitore; per modificare i tempi e le dimensioni dovete agire sulla divisione effettuata sulla variabile espandi e sul blocco di codice Html (stilizzazione Css compresa).

Divertitevi a personalizzare l'effetto di esempio per implementarlo nelle vostre Intro Dhtml ;-)

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (106.555)

:: Breve guida a jQuery (96.818)

:: Le espressioni regolari in Javascript (84.690)

:: Gestione delle stringhe in Javascript (74.154)

:: Stampare una pagina col Dhtml (42.639)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (39.785)

:: Menu orizzontale dinamico in Dhtml (36.961)

:: Gli Array in Javascript (35.690)

:: Temporizzazioni Javascript (31.211)

:: Istruzion condizionali in Javascript: if e switch (28.629)

IN EVIDENZA
DOWNLOAD