countdown su caricamento pagina web

[Swalke]

Ciao a tutti.
Sto cercando un sistema per costruire una sorta di countdown sul tempo di caricamento di una pagina web.
Ho trovato soluzioni di preload in flash che però sembrano applicabili solo per il caricamento di filmati e non di pagine web.

Ho anche trovato qualche soluzione in javascript, ma sono delle boiate, nel senso che in realtà visualizzano una barra di caricamento che quando arriva alla fine effettua una redirezione al link specificato.
Quindi non serve a niente.

Altre soluzioni valide, in javascript, presentano una scritta "loading" che lascia il posto alla pagina solo quando questa è stata tutta caricata. Quasi perfetto, solo che in questo caso non ci sono ne barre di scorrimento ne countdown.

Bho... ...aspetto vostri suggerimenti, da dynamic html a java a Flash.

Grazie!

[Mone]

Ideea:
Esempio:
metti un div con un id a inizio pagina:

Codice: Seleziona tutto

<div id="pizza"></div>


qui mettiamo il countdown.
Poi metti una funzione javascript tipo questa:

Codice: Seleziona tutto

function writePerc(perc) {
       if (document.getElementById) {
                    var div = document.getElementById("pizza");
                    div.innerHTML = perc+"%";
       }
}


infine metti delle chiamate inline a intervalli nel tuo html tipo

Codice: Seleziona tutto

writePerc(10);
writePerc(20);


Siccome le chiamate inline vengono eseguite appena scaricate avrai ogni volta il valore giusto

Questo è solo uno spunto, ma potrbbe funzionare. Fai un po' di prove, se va bene lo si può migliorare e fittare alle tue esigenze.

[Swalke]

Ciao Mone!
Scusa se rispondo solo ora...
...purtroppo non capisco bene cosa fa di preciso il javascript che mi hai postato.

Però ho la brillante intuizione che possa andare bene... ...anzi, se l'intuito non mi inganna definirei il tuo aiuto geniale!

...solo spiegami bene quella writePrec perchè non sono espertissimo di JS e hai usato dei metodi che non conosco!
esempio: "div.innerHTML"
...e anche quell' "if", quand'è che viene eseguito il suo contenuto?
...è giusto per capire bene cosa faccio!

Grazie mille!

[Mone]

Sai cos'è il DOM anche solo vagamente?
Beh, Document Object Model, ovvero il tuo documento (la pagina HTML) rappresentata come un insieme di oggetti, nello specifico ogni tag ed ogni blocco di testo sono un oggetto, se un tag A sta dentro un tag B allora l'oggetto del tag A starà dentro l'oggetto del tag B
All'inizio con la rivalità tra IE e NS il DOM era una giungla, poi arrivò il W3C ed ora si va verso la standardizzazione.

Detto ciò questa riga:

Codice: Seleziona tutto

if (document.getElementById)

controlla semplicemente che sia presente il metodo getElementById (che sui vecchi browser non esiste) per poi poterlo utilizzare una riga sotto. Questo metodo ci tornerà l'oggetto associato al tag con ID il parametro che gli abbiamo dato (nel nostro caso pizza).
(NB: Anche se questo metodo non c'è è possibile risalire al div pizza, ma questa è un'altra storia)
Ora, avendo l'oggeto legato al tag div, vogliamo cambiarne il contenuto. Per farlo abbiamo diverse vie, ho scelto la + spiccia, infatti modificando l'attributo innerHTML di un oggetto legato a un tag, non si fa altro che scrivere dentro quel tag (se ci fosse stato qualcosa tra <div id="pizza"> e </div> sarebbe stato sovrascritto.

Se hai bisogno di altre delucidazioni non c'è problema, perchè l'argomento è davvero molto ampio.

[Locutus]

E per un forum phpBB come fare visto che ci sono centinaia di pagine?

Sono sicuro che esiste perchè l'ho visto.

[Swalke]

Si, so cos’è il Dom perchè ho studiato XML tempo fa.

La tua spiegazione è stata chiara e ora ho capito come lavora quel JScript!
Addirittura mi è venuta un'idea geniale che associata alla tua idea geniale darà un risultato come non ne ho mai trovati su tutto il web. Infatti ho provato a cercare dei loader per pagine html ma non si trova niente di serio... ...tutte cavolate che in realtà non indicano il vero stato di caricamento della pagina oppure risposte su dei forum che dicevano che i loadre erano possibili solo per filmati flash.

Invece la tua idea è semplice, geniale e soprattutto fa quello che voglio!

Ecco la mia ideuccia (...certamente a te sembrerà una banalità se sei un esperto ma a me è venuta in mente adesso e ne sono fiero, quindi non ridere )
Se nel tuo js metto oltre alla stampa di “perc+“%”” anche la stampa di un immagine di una barretta alta 10 px e larga “perc” px, oltre a vedere i numerini scorrere, otteniamo una barra di caricamento!

MITICO!!!

Grazie Mone!!!

[Mone]

Se nel tuo js metto oltre alla stampa di “perc+“%”” anche la stampa di un immagine di una barretta alta 10 px e larga “perc” px, oltre a vedere i numerini scorrere, otteniamo una barra di caricamento!

Si beh, in quel writePrec (che poi volevo chiamarlo writePerc...) puoi far fare ciò che vuoi! Ricorda che però non puoi usare delle immagini diverse per mostrare il caricamento poichè quelle i browser le caricano quando vogliono e nessuno può dirgli nulla usa piuttosto un div che s'allunga (ma da quello che hai scritto forse è già questa la tua idea)
Fammi poi sapere se ha funzionato che sono curioso! (Magari posta il link al risultato!)

E per un forum phpBB come fare visto che ci sono centinaia di pagine?
Sono sicuro che esiste perchè l'ho visto.

Se ci dici dove l'hai visto possiamo darci un occhio e vedere che cosa fa

[Swalke]

...ci vorrà un po' prima che lo posto...
...sono un po' indaffarato...

Comunque volevo anche chiederti: ma questa cosa funziona su tutti i browser?

[Mone]

Se funziona su uno funziona su tutti credo, perchè non tira in ballo nulla di specifico, sfrutta solo la regolare esecuzione di uno script javascript.

Conta però che alcuni browser bufferizzano un po di pagina prima di iniziare l'esecuzione, un esempio è firefox, altri bufferizzano tutto prima di iniziare l'esecuzione come alcune versioni di Safari, quindi su firefox potrebbe risultar inutile su pagine troppo piccole, su Safari potrebbe non funzionare.
Insomma, devi fare un po' di prove.

PS: così com'è scritto non funzionerebbe su NS4 e IE4 (IE5? non mi ricordo! ) ma è solo questione di aggiungere qualche riga di codice.

[Triumph Of Steel]

per NS4 credo che l'equivalente di

Codice: Seleziona tutto

document.getElementById

sia

Codice: Seleziona tutto

document.layers

ma controllerei per essere sicuro.

[Mone]

per NS4 credo che l'equivalente di
document.getElementById
sia
document.layers
ma controllerei per essere sicuro.

All'incirca sì, ma la differenza è che document.layers è un array contenente gli oggetti, mentre getElementById è un getter che tralaltro fornisce oggetti molto più completi. Anche su IE c'è un array, che è document.all, quello che non ricordo è se su IE5 c'è già il getElementById.
Inoltre su NS4 e probabilmente su IE4 non c'è innerHTML, quindi bisogna usare dei metodi alternativi come campi di form.
Altri dubbi?