Newsgroup: it.comp.lang.javascript
Titolo: Loading x%...

Spett.le Newsgroup,
grazie ad Atipower ora sono in grado di far apparire un div con la scritta
"Loading..." mentre il browser carica le possibili immagini presenti nella
pagina, a farlo sparire quando tutto è caricato e far apparire il div con le
immagini caricate.
La mia domanda è:
posso far apparire la scritta "Loading" con la percentuale del caricamento
in corso?
Spero di essermi spiegato bene, ma se avete dei dubbi potete andare sul sito
www.nightwolf.it
  il sito lo fatto io e nella prima pagina compare la
scritta "Loading..." e sparisce quando le immagini sono caricate.
Come posso fare per inserirci la percentuale di caricamento?
Grazie,
Wolpiro.

 ha scritto nel messaggio
news:yZK%5.138458$hk4.5...@news.infostrada.it...

Riprendevo l'esempio dell'altra volta.......(cmq provalo perchè l'ho buttato
giù velocemente e non sò se funxia)
<html>
<HEAD>
<TITLE>test</TITLE>
<script language="javascript">
var aa=0;
var imm1 = new Image();
imm1.src = 'images/BOTT1.gif'
var imm2 = new Image();
imm2.src = 'images/BOTT10.gif'
var imm3 = new Image();
imm3.src = 'images/BOTT15.gif'
var imm4 = new Image();
imm4.src = 'images/BOTT2.gif'
function loadimm(){
aa++
if(aa==1){
barra('load1')
}
else if(aa==2){
barra('load2')
}
else if(aa==3){
barra('load3')
}
else if(aa==4){
barra2('loadall')
carica()
}
}
function carica(){
if(document.all){
document.all.due.style.visibility="visible";
document.all.uno.style.visibility="hidden";
}
else if(document.layers){
document.layers['due'].visibility="visible";
document.layers['uno'].visibility="hidden";
}
else if(document.getElementById){
document.getElementById('due').style.visibility="visible";
document.getElementById('uno').style.visibility="hidden";
}
}
function barra(id){
if(document.all){
document.all[id].style.visibility="visible";
}
else if(document.layers){
document.layers['loadall'].document.layers[id].visibility="visible";
}
else if(document.getElementById){
document.getElementById(id).style.visibility="visible";
}
}
function barra2(ids){
if(document.all){
document.all[ids].style.visibility="hidden";
}
else if(document.layers){
document.layers[ids].visibility="hidden";
}
else if(document.getElementById){
document.getElementById(ids).style.visibility="hidden";
}
}
</script>
</HEAD>
<BODY >
<div id="uno" style="position: absolute; left: 126; top: 200; width: 509;
height: 54"><font size="5"><b>ATTENDERE
  CARICAMENTO IN CORSO!!</b></font></div>
      <div id="loadall" style="position:absolute; top:240; left:150;
visibility:visible; ">
  <div id="load1" style="position:absolute; top:240; left:150; height:30;
visibility:hidden; width:100; background-color:red;"></div>
    <div id="load2" style="position:absolute; top:240; left:250; height:30;
visibility:hidden; width:100; background-color:red;"></div>
  <div id="load3" style="position:absolute; top:240; left:350; height:30;
visibility:hidden; width:100; background-color:red;"></div>
  <div id="load4" style="position:absolute; top:240; left:450; height:30;
visibility:hidden; width:100; background-color:red;"></div>
</div>
  <div id="due" style="position:absolute;visibility:hidden;">
    <p align="center">
    <img border="0" src="images/BOTT1.gif" width="140" height="40"
onLoad="loadimm()">
    <img border="0" src="images/BOTT10.gif" width="140" height="40"
onLoad="loadimm()">
    <img border="0" src="images/BOTT15.gif" width="140" height="40"
onLoad="loadimm()">
    <img border="0" src="images/BOTT2.gif" width="140" height="40"
onLoad="loadimm()">
    </div>
</BODY>
</HTML>
andreotta fabiano
 WebMªster ATI POWER s.n.c.
 
andr...@atipower.it
 
http://www.atipower.it
 
http://www.aticommerce.com
 
http://www.afdsoftware.freeweb.org
 
http://www.jsdir.com
 
http://www.javascript.3000.it

  WebMŞster ATI POWER s.n.c.


 anche fittizia...).
Bene o male il concetto e' quello che ti ha gia' spiegato Fabiano.
Ovvero, associ ad ogni evento onload delle imgs piu' "pese" una funzione.
In tal modo tale funzione viene richiamata quando l'immagine e' stata
effettivamente caricata.
All'interno della funzione, scriverai in un layer in modo dinamico la
percentuale CORRENTE.
E' molto semplice. Supponi di avere 5 immagini:
var currImgs=0,maxImgs=5;
function loaded(){
    var strPerc;
    currImgs++;
    strPerc=(100*currImgs)/maxImgs+"%";
    if (document.getElementById)
        document.getElementById("layerProgress").innerHTML=strPerc;
    else if (document.all)
        document.all["layerProgress"].innerHTML=strPerc;
    else if (document.layers){
        document.layers["layerProgress"].document.write(strPerc);
        document.layers["layerProgress"].document.close();
    }
}
Ovviamente "layerProgress" e' il layer dove andra' visualizzata la
percentuale, del tipo:
<div id="layerProgress"
style="position:absolute;top:0px;left:0px;width:100px;">0%</div>
Ovviamente la posizione e' a tua discrezione. ;)
Volendo, potresti recuperare direttamente il valore "maxImgs" usando la
proprieta' length della collection "images".
maxImgs=document.images.length;
Il punto e' che magari non hai intenzione di mettere la funzione di
caricamento su proprio TUTTE le immagini (leggasi, immagini da 16x16 pixel,
magari. ;) ), inoltre su Netscape 4.x document.images.length non ti
restituisce le immagini contenute a loro volta in dei layer (in quanto NS,
si sa', considera i layer documenti a se').
Spero di esserti stato di aiuto.

 P.S.: la barra non scompare una volta caricata tutta!
Verifica l'impostazione della visibility="hidden" quando aa==4 ossia quando
il caricamento è al 100% deve nasconderti tutti i livelli.......
andreotta fabiano
 WebMªster ATI POWER s.n.c.
