Corsi on-line

Loading in attesa del caricamento della pagina

Molti siti utilizzano una schermata di “loading” che viene mostrata al momento dell’apertura della pagina web in attesa che il contenuto del documento venga caricato per intero. In questo modo si evita di mostrare all’utente la pagina web “in fase di caricamento” con elementi mancanti e con un layout incompleto.

Si tratta, ovviamente, di una mera scelta stilistica senza nessuna conseguenza in merito al corretto funzionamento del sito web.

In questo post vi mostrerò un semplice script che consente di riprodurre una scermata di loading che si sovrappone, con effetto trasparenza, sui reali contenuti mentre questi sono in fase di download.

Per prima cosa vediamo il codice javascript da inserire nell’intestazione della pagina:

<script type="text/javascript">
(function(){   
  if (window.addEventListener)
  {
    window.addEventListener("load", nascondi_loading_screen, false);    
  }else{
    window.attachEvent("onload", nascondi_loading_screen);
  }
})();
function mostra_loading_screen()
{
  document.getElementById("loading_screen").style.display = 'block';
}
function nascondi_loading_screen()
{
  document.getElementById("loading_screen").style.display = 'none';
}
</script>

Di seguito il codice CSS da aggiungere al vostro foglio di stile:

<style type="text/css">
#loading_screen
{  
  display: none;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: black;
  color: white;  
  text-align: center;
  padding-top: 100px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
</style>

All’interno del <body> è necssario aggiungere queste righe di codice prima dell’effettivo contenuto della pagina:

<div id="loading_screen">
  <h1>Loading...</h1> 
  <p>La pagina è in caricamento<br/>
  Resta connesso e non cambiare sito!</p>
</div>
<script type="text/javascript">
mostra_loading_screen();
</script>

Ovviamente potete customizzare a piacimento il DIV “loading_screen” utilizzando, ad esempio, un’immagine di preload come quelle che potete trovare a questa pagina.

Post correlati
I più letti del mese
Tematiche