Newsgroup: it.comp.lang.javascript
Titolo: ProgressBar in js

Pensavo l'altro giorno di implementare una sorta di ProgressBar in
javascript.
L'idea era questa. Per una presentazione devo disporre di decine di immagini
subito nella cache del browser, quindi ho pensato ad una splash con la
scritta "Attendere, caricamento in corso..." e in background il caricamento
di tutte le immagini (con width=0 height=0)
Ora il problema è questo, se gestisco il caricamento della presentazione con
il body.onload va tutto ok. Però vorrei che l'utente non si facesse due
p***e così ad aspettare davanti ad una finestra "congelata"! Allora mi sono
detto, inserisco una progressbar e appena carico un'immagine, incremento la
larghezza del DIV (che rappresenta la progressbar) di un tot. Ma le immagini
supportano l'evento onload? Io ho avuto a che fare con la proprietà loaded,
ma questa è true anche se l'immagine viene scaricata a metà, o il download
viene interrotto.
Che ne dite? ...Riccardo, Catarsi, Zero ??
Ciao
~~
artemis.alpeia

, 
it.i...@alpeia.artemis says...

Io non ne ho, ma ne ho visto uno molto carino di Gianfranco Carlotti, 
solo che non riesto piu' a trovare la URL, sorry.
Speriamo che GfC sia on - line
-- 
Ciao, Riccardo
------------------------------------------------------------------------
http://www.jsdir.com
 ---- Bring Your Site To Life!!!!
------------------------------------------------------------------------
http://www.dev2dev.it
 - La rete ha connesso nuove particelle - D2D006
------------------------------------------------------------------------
 ----> itALY = it <----

 > subito nella cache del browser
Posso proporti questa.
www.gfcarlotti.it/gfC_free/
per la spiegazione e ulteriori esempi, clicca su "loadingPlus",
serve anche per creare menu' con i rollover.
Guarda anche l' albumFoto, sempre riguardante il preCaricamento.
--
Ciao
  [web]   
www.gfcarlotti.it
   [mail]   franco@@
gfcarlotti.it
    [pgp]  
www.gfcarlotti.it/pgp/franco.asc

 > L'idea era questa. Per una presentazione devo disporre di decine di
immagini


 MPG.1786781b8...@powernews.libero.it...
vi ringrazio entrambi (figo il cielo stellato!), ma forse mi sono spiegato
male io. Il preload va tutto ok, quello che vorrei fare č:
per ogni immagine I da precaricare, quando č stato completato il download di
I, incrementa la dimensione del DIV "progressbar" colore blu di un tot, in
modo che all'inizio il DIV sia largo 0px, alla fine sia al 100% della sua
larghezza, e via via che le immagini vengono caricate, il DIV si "allarga".
Nel documento ho tante immagini "nascoste" del tipo
<IMG SRC="img1.gif" WIDTH=0 HEIGHT=0 />
<IMG SRC="img2.gif" WIDTH=0 HEIGHT=0 />
<IMG SRC="img3.gif" WIDTH=0 HEIGHT=0 />
...
<IMG SRC="imgN.gif" WIDTH=0 HEIGHT=0 />
Il punto č: dove metto il codice
function increaseProgressBar()
{  with (document.getElementById('progressbar').style)
   {  width = parseInt(width) + INCREMENT;
   }
}
nell'onload delle immagini? (funziona?)
<IMG SRC="img1.gif" WIDTH=0 HEIGHT=0 onLoad="increaseProgressBar();"/>
~~
artemis.alpeia

 Che ne dite? ...Riccardo, Catarsi, Zero ??
Vai su 
www.codice.it
 (no, nessuna pubblicita' occulta), feci uno script 
(ormai un anno fa, direi) che piu' o meno e' qualcosa di analogo.
vi erano delle immagini da utilizzare in rollover ch erano decisamente 
pesanti, e quindi decisi di mettere una scritta percentuale per 
notificarlo all'utente.
Non ricordo molto dello script, e sicuramente va ottimizzato. Cmq il 
concetto di base e' quello. Se nn ricordo male, parte dopo l'onload del 
body.
PS
Purtroppo nn posso partecipare molto alle discussioni del Newsgroup, 
almeno per il momento.. per "problemi" di lavoro. Fatemi sapere by mail, 
in caso. :)
-- 
C'ya,
ZER0
  :. job profile - coder.gfxer.webDesigner
"Quanti angeli danzano sulla punta di uno spillo?"

 l'idea mi piaceva.
Ma non ne parlavamo insieme un paio di mesi fa?
Forse mi sbaglio ed era Cristiano che stava facendo una cosa simile.
L'evento onload è supportato dalle immagini e viene scatenato quando
l'immagine viene caricata, non la pagina.
Chiaramente se voglio fare vedere il progress con una barra preferisco far
partire il preload a pagina caricata.
La cosa l'ho fatta qualche tempo fa, e pure abbastanza crossbrowser (intendo
ns4, ns6 e ie vari: con Opera non mi ci sono mai messo, perché mi veniva
tagliato fuori da altre esigenze).
Faccio un esempio a memoria. La mia progress bar sta in un layer di
larghezza 400 la cui clip è inizialmente a 0 (in larghezza ovviamente).
var arrImages=["1.gif","2.gif","3.gif","4.gif"];
var nxLoaded=0;
function preloading(){
    // 400 è la larghezza totale della progress bar
    var dummy=parseInt(400*++nxLoaded/arrImages.length,10);
    // imposto la larghezza della clip al valore di dummy
    alert(dummy);
    if(nxLoaded==arrImages.length){
        alert("fai partire l'applicazione");
    }
    return true;
}
function startPreload(){
    for(var i=0;i<arrImages.length;i++){
        var dummy = arrImages[i];
        arrImages[i]=new Image();
        arrImages[i].onload=preloading;
        arrImages[i].src=dummy;
    }
}
self.onload=startPreload;

 partire il preload a pagina caricata.
ho risolto anche questo con un trucco infame:
carico il layout della pagina (immagini comprese) nelle prime diciamo 100
righe, in modo da visualizzare quanto necessario
nelle restanti 100 righe, diciamo, carico in background le immagini da
utilizzare nella presentazione, con il gestore onload impostato per
incrementare la progressbar
(la barra si allarga quindi quando ancora il documento è aperto)
all'onload della pagina avvio la presentazione
Grazie a tutti per le idee e gli esempi, se volete vi posto il codice
Ciao
~~
artemis.alpeia