e questa è la spiegazione: (scusa ma ho dovuto frammantare il tutto)
Codice PHP:
*******************************************************************
A C Q U I S T A I L C D - R O M D I H T M L . I T !
Eccezionale offerta per gli iscritti alla mailing list:
acquistando il primo cd-rom contentente tutte le risorse di HTML.it
avrai diritto ad uno sconto del 25% sulle future edizioni.
Cosi' avrai sempre un prodotto aggiornato. Che aspetti, clicca qui!
[url]http://www.html.it/cdrom.htm[/url]
*******************************************************************
>>>>>>>>>>>>>>>>>>>> UN JAVASCRIPT A SETTIMANA <<<<<<<<<<<<<<<<<<<<
servizio gratuito di ML offerto da HTML.it
[url]http://www.html.it[/url]
settimana 56 - 28 febbraio 2000
----------------------------------------------
| PRELOAD DI PAGINA E IMMAGINI IN JAVASCRIPT |
----------------------------------------------
di Massimiliano Valente
- SCHEDA TECNICA -
GENERE: utiliy
DESCRIZIONE: Creare una pagina di attesa con visualizzatore grafico progressivo
mentre le immagini della pagina successiva vengono caricate.
COMPATIBILITA': MSIE, Netscape
USO FILE ESTERNI: no
FILE ALLEGATO: "jscript_280200.zip" da 8Kb
- DESCRIZIONE -
Il preload e' un elemento tipico dei filmati Flash, laddove la grandezza dei file da scaricare genera tempi di attesa piu' o meno lunghi. La lentezza dei collegamenti Internet e qualche immagine piu' pesante del solito rende possibili tempi di attesa anche per pagine HTML. Javascript consente un effetto simile ai filmati Flash anche per semplici documenti HTML, e lo script di questa settimana lo dimostra.
In altri termini questo script crea una pagina precedente a quella da raggiungere, e mentre un counter progressivo mostra lo status del donwload, le immagini della pagina successiva vengono caricate. In questo modo, quando il counter avra' terminato la sua corsa, la pagina successiva e tutte le immagini in essa inserite saranno immediatamente visualizzate.
Il file allegato a questa mail "jscript_280200.zip" si compone di 3 file (esclusi i file "htmlpoint.gif" e "jscript_280200.txt"):
esempio.htm
nero.gif
blu.gif
Per una piu' semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarita' di questo Javascript.
>>>>>>>>>>>>>>>> jscript_280200.htm <<<<<<<<<<<<<<<<<<
Questa file non e' contenuto nello zip allegato. Si tratta della pagina principale, cioe' la pagina che vogliamo raggiungere, e della quale realizzeremo il preload.
Per evitare la spedizione di un attach troppo pesante, abbiamo inserito la pagina da raggiungere, con tanto di immagini, su uno dei server di HTML.it; precisamente:
[url]http://www.htmlpoint.com/jscript_280200.htm[/url]
Questa pagina comprende a sua volta 4 immagini:
[url]http://www.htmlpoint.com/immagine01.jpg[/url]
[url]http://www.htmlpoint.com/immagine02.jpg[/url]
[url]http://www.htmlpoint.com/immagine03.jpg[/url]
[url]http://www.htmlpoint.com/htmlpoint.gif[/url]
Abbiamo deciso di pubblicare questa pagina sul Web, anche perche' in locale sarebbe stato troppo breve il tempo di caricamento per verificare l'effettivo funzionamento del preload.
Da un punto di vista tecnico si tratta di una normalissima pagina HTML che non prevede l'inserimento di alcun codice Javascript. E' necessario, pero', prendere nota delle immagini inserite per creare il preload delle stesse.
>>>>>>>>>>>>>>>> esempio.htm <<<<<<<<<<<<<<<<<<
Questo file e' il piu' importante ai fini dello script, in quanto contiene l'intera sintassi Javascript necessaria al suo funzionamento.
Perche' lo script funzioni e' necessario agire su diversi punti del codice.
Prima di tutto impostiamo il codice all'interno dei campi <HEAD></HEAD> del documento; questa la sintassi completa:
-------------------------
<script language="JavaScript">
<!--
vers = 1.0;
// -->
</script>
<script language="JavaScript1.1">
<!--
vers = 1.1;
// -->
</script>
<script language="javascript">
<!--
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++)
this[i] = initArray.arguments[i];
this.length = initArray.arguments.length;
}
var pics = new initArray(
"http://www.htmlpoint.com/immagine01.jpg",
"http://www.htmlpoint.com/immagine02.jpg",
"http://www.htmlpoint.com/immagine03.jpg",
"http://www.htmlpoint.com/htmlpoint.gif");
var transfer_url = "http://www.htmlpoint.com/jscript_280200.htm";
function transfer(param) {
if (vers>1.0)
location.replace(transfer_url);
else
location.href = transfer_url;
}
function done() {
if (vers < 1.1)
transfer();
else
commence_loading();
}
function commence_loading() {
for (g=0;g<pics.length;g++)
eval('document.preload'+g+'.src = "'+pics[g]+'";');
}
// preload the status bar images
if (vers >= 1.1) {
blue = new Image();
blue.src = "blu.gif";
black = new Image();
black.src = "nero.gif";
}
var loaded = new Object();
for (h=0;h<pics.length;h++)
loaded[h] = 0;
num_loaded = 0;
function update(num) {
loaded[num]++;
if (loaded[num] == 2) {
eval('document.status'+num_loaded+'.src = "blu.gif";');
num_loaded++;
if (num_loaded == pics.length)
transfer();
}
}
// -->
</script>
-------------------------
Particolarmente importanti i riferimenti alle immagini ed al documento dei quali viene effettuato il preload.
Le immagini inserite all'interno del file jscript_280200.htm sono singolarmente richiamate da questo codice:
"http://www.htmlpoint.com/immagine01.jpg",
"http://www.htmlpoint.com/immagine02.jpg",
"http://www.htmlpoint.com/immagine03.jpg",
"http://www.htmlpoint.com/htmlpoint.gif");
Mentre la pagina HTML che contiene queste immagini e che verra' caricata dopo un certo numero di secondi e' stabilita da:
var transfer_url = "http://www.htmlpoint.com/jscript_280200.htm";
Perche' lo script funzioni e' necessario richiamare il gestori di eventi onLoad all'interno del tag <BODY>:
<BODY onLoad="done()">
L'ultima operazione da compiere consiste nell'inserire il seguente codice nel corpo del documento (tra i tag <BODY></BODY>):
-------------------------
<script language="JavaScript">
<!--
if (vers < 1.1) {
document.write('Attenzione! Il tuo browser non supporta Javascript');
for (j=0;j<pics.length;j++) {
document.write('[img]'+pics[j]+'[/img]');
}
} else {
document.write('<table><tr><td>[b]status:[/b] '
+ '[img]blu.gif[/img]');
for (k=0;k<pics.length;k++)
document.write('[img]nero.gif[/img]');
document.write('</td></tr></table>
'
+ '[url="'+transfer_url+'"]<font size=arial>Sto caricando la pagina....</font>[/url]');
for (j=0;j<pics.length;j++) {
document.write('[img]nero.gif[/img]');
}
}
// -->
</script>
-------------------------
Vediamo quali porzioni di codice vanno modificate per una maggior personalizzazione dello script:
document.write('Attenzione! Il tuo browser non supporta Javascript');
Questo codice genera il messaggio di avviso per i browser che non supportano Javascript, e che dunque non possono visualizzare questa pagina di preload.
La percentuale di tali browser e' minima.
+ '[url="'+transfer_url+'"]<font size=arial>Sto caricando la pagina....</font>[/url]');
Questa riga di codice, oltre a richiamare la funzione di trasferimento all'URL principale, viene utilizzate per messaggi testuali di attesa. Come si nota e' possibile inserire qualsiasi tag HTML all'interno di questo codice.
Questo script si dimostra utile per pagine particolarmente pesanti; e' facile da personalizzare ed ha un buon impatto visivo. Rappresenta dunque, una buona scelta per migliorare le proprie pagine e rendere meno noiosa l'attesa dei visitatori.
)
peccato.... grazie lo stesso!
)
Permessi di invio
Rispondi quotando