Usiamo DHTML per una pagina di preload tipo Flash

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. Nella sezione FLASH di HTML.it c'è anche un'apposita sezione dedicata ai Preload. 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. Lo script funzionerà, ahimè, solo su Internet Explorer.

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 non 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 creato ad hoc in modo da dare un colore alla barra di stato nella parte ancora non raggiunta dall'avanzamento e un altro colore 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 codiceespandi++

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 verso il file homepage.html al termine dell'esecuzione dell'effetto, e viene lanciata direttamente nel blocco dello script. Da notare che il tempo di reindirizzamento verso un'altra pagina è stabilito da noi agendo sul tempo, nel nostro caso 12000 millisecondi (ossia 12 secondi), della funzione Go().

La funzione "madre" Loading(), invece, verrà lanciata all'apertura di pagina agendo sul tag BODY:

<body onLoad="Loading()">

Non resta altro da fare che visualizzare il codice completo dello script.

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 ;-)