Simulazione dell'effetto Loading di Flash col Dhtml

Autore: Luca Ruggiero | Tell a Friend Corso Java Impara a programmare col linguaggio OOP della Sun. Corso Javascript e DHTML Impara a creare controlli ed animazioni! Corso Web Design Disegno di siti Web con HTML, CSS e Dynamic HTML.

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>

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

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

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

espandi++

<body onLoad="Loading()">

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

TAGS - effetto loading, loading flash, flash, dhtml, javascript, html, css