Caricamento in corso... in ASP e DHTML

ASP E-Commerce con ASP Menu Javascript Ricette Cocktail Registrazione domini Area Aziende

Home + Articoli + Grafica e Immagini + Articolo # 65

Concesso in esclusiva a Mr.Webmaster. Vietata la riproduzione.

Un effetto che spesso vediamo nei siti Flash è quello che mostra una scritta di caricamento in corso quando il filmato sta caricandosi. Possiamo realizzare un servizio del genere anche senza l'ausilio di Flash in una pagina composta da solo HTML.

Ovviamente realizzare l'effetto in maniera fittizia è stupido! Basterebbe utilizzare una temporizzazione per nascondere la scritta di attesa sostituendola col reale contenuto della pagina, o effettuando un redirect.

Quello che realizziamo in questo articolo, utilizzando una pagina ASP con pochissime righe di codice e con due script DHTML, vuole realmente mostrare una scritta di attesa intanto che il contenuto della pagina venga bufferizzato ed inviato al client.

Allo scopo utilizziamo le proprietà Buffer e Flush dell'oggetto Response che servono rispettivamente ad inviare ed a ripulire l'output richiesto al server da un client. A seconda dei casi utilizziamo uno script DHTML piuttosto che l'altro per mostrare il messaggio o per nasconderlo, per il tempo necessario che il server invii al client il contenuto della pagina richiesta.

Di seguito il codice crossbrowser di una vostra ipotetica Homepage

<%@LANGUAGE = VBScript%>
<%
    Response.Buffer = True
%>
<html>
    <head>
        <title>Caricamento in corso... in ASP e DHTML</title>
        <style type="text/css">
            #LOADING
            {
                position: Absolute;
             }
        </style>
        <script type="text/javascript" src="loading.js"></script>
    </head>
<body>

<div id="LOADING">Caricamento in corso...</div>

<%
    Response.Flush
%>

<p>Inserire qui posizione l'intero contenuto della pagina</p>

<%
    Response.Flush
%>

<script type="text/javascript">
    var testo;
    if (livello)
    {
        testo = document.getElementById("LOADING");
    }
    else if (NN)
    {
        testo = document.LOADING;
    }
    else if (IE)
    {
        testo = document.all.Loading;
    }
    Nascondi(testo);
</script>

</body>
</html>

Il codice HTML richiama nell'header della pagina il file loading.js che crea le funzioni Javascript richiamate nel corpo della pagina. Di seguito il codice:

if (document.getElementById)
{
    var livello = true;
}
else if (document.layers)
{
    var NN = true;
}
else if(document.all)
{
    var IE = true;
}
function Mostra(oggetto)
{
    if (NN) oggetto.visibility = "Show";
    else oggetto.style.visibility = "Visible";
}
function Nascondi(oggetto)
{
    if (NN)
    {
        oggetto.visibility = "Hide";
    }
    if (IE || livello)
    {
        oggetto.style.visibility = "Hidden";
    }
}