JS: una specie di preload grafico

**gabcaly** · 23-08-2003, 01:56

Salve,

vorrei durante il caricamento di una pagina visualizzare una immagine poi in seguito all'evento onLoad togliere l'immagine.

Come si fa ?

**gabcaly** · 23-08-2003, 02:08

ho provato a realizzarlo aprendo una nuova pagina poi con l'evento onLoad ho cercato di chiuderla. Potrebbe funzionare, soltanto che anzichè chiudermi la pagina di popup mi chiede di chiudere la pagina principale. Ma c'è anche un modo per chiudere un tipo di pagina, per esempio indicano un nome come si fa per i Moduli, le immagini ecc. ecc. ????

:master:

**Xinod** · 23-08-2003, 04:41

precisamente,
cambia il window.open in
fin=window.open('indirizzo.htm','nomefinestra','ca ratteristiche')
e la chiudi con
fin.close()

**gabcaly** · 23-08-2003, 19:45

Non ci avevo pensato. Grazie

Ho elaborato il codice seguente, soltanto anziché utilizzare una window ho usato del semplice testo per dire che c'è da attendere il caricamento della pagina, con caratteristica "posizione assololuta" .
Si è reso necessario uno script per visualizzare e nascondere il testo. Ora volevo chiederti una cosa.
Visto che le posizioni sono assolute, devo controllare anche la risoluzione dello schermo ? E se si, come faccio a rendere dinamico il mio STYLE ? cioè cambiare le posizioni ?

codice:

    <html>
    <head>
      <title>Your Title Here</title>
    </head>

    <script language="JavaScript">

      <!-- 
      function init()
      {
        // Microsoft Internet Explorer
        if (document.all)
        {
          document.all.loading.style.visibility="hidden";
        }
        // Netscape 
        else
        {
          document.loading.visibility="hide";
          document.myapplet.visibility="visible";
        }
      }

      // -->
      </script>

    <style type="text/css">

      #loading {
        position:absolute;
        left:370;
        top:200;
      }
     </style>

    <body onLoad="init()">

      <div id="loading">
        

ATTENDI CARICAMENTO PAGINA...</p>
      </div>

    </body>
  </html>

**Xinod** · 23-08-2003, 21:11

sul fatto di controllare la risoluzione dello schermo dipende solo dal layout,
se è tutto appoggiato a sinistra non cambia nulla

cmq così come cambi la visibilità puoi settare il top e left
document.getElementById('loading').style.left='500 px'

la sintassi è leggermente diversa da quella da te utilizzata
che risale a quando i browser + diffusi erano IE4 e NN4;
IE (dalla versione 5 in poi) supporta tanto il DOM document.all
che quello document.getElementById

quest' ultimo è considerato standard ed è supportato da tutti i nuovi browser (opera, mozilla, nn6 o 7, safari etc...)

a questo proposito potresti incontrare problemi con lo script da te postato, puoi modificarlo così

if (document.getElementById){
document.getElementById('loading').style.visibilit y='hidden'
}
else if (document.all) {
document.all.loading.style.visibility='hidden'
}
else {
document.loading.visibility='hide'
}

ciao

**gabcaly** · 24-08-2003, 15:21

Thanks very much, really !!! :tongue:

**gabcaly** · 24-08-2003, 19:00

.... ciao, mi permetto ancora di chiederti una cosa:

sto facendo delle prove in Netscape 7.01 e ho notato che il mio script per caricare una immagine non funziona. Non mi segnala alcun errore. In IE 6.0 tutto okay.

Ritornando al fatto della compatibilità fra i più svaritati browser, cosa dovrei modificare in questo script per ottenere il medesimo risultato ?

Diciamo che ho fatto delle prove ma non ci sono riuscito :master:

intanto ti commento cosa fa questo script:
1. Seleziona un file grafico
2. lo carica in memoria
3. controlli di dimensione
4. visualizza una anteprima in una tabella fatta dove ci sono queste istruzioni:

codice:


<div>
 [img][/img]
</div>

il problema sta nel fatto che riesco a selezionare il file, penso che lo carichi in memoria ma non riesco a vederlo nella tabella che contiene una immagine senza riferimento. Il modulo si chiama formImage

codice:

<script> 
<!-- 
function LoadImage(){ 
for (var conta= 0; conta < 50; conta++) {
 var immagine=new Image(); 
 immagine.src=document.FormImage.nomefile.value; 
 var altezza=parseInt(immagine.height); 
 var larghezza=parseInt(immagine.width); 
 var loaded=immagine.complete; 

 document.FormImage.ImageDim.value=larghezza + " x " + altezza + " pixels";

 document.FormImage.upload.disabled = false;
  
}

 document.all["AvatarImage"].src=document.FormImage.nomefile.value;

 document.all["AvatarImage"].width=larghezza; //+60;
 document.all["AvatarImage"].height=altezza; //+60;
  

if (larghezza > 100 || altezza > 100){ 
  document.FormImage.nomefile.value=""; 


alert("Immagine troppo grande: "+larghezza+" x "+altezza+" pixels!    \nNon è possibile effettuare un UpLoad.\nDimensioni massime richieste 100 x 100 px"); 
document.FormImage.upload.disabled = true;

 }
 
} 
-->
</script>

questo è il codice HTML per facilitarti un eventuale test:

codice:


<body>

<form method="POST" name="FormImage" action="../upload.asp">
 <input type="text" name="ImageDim" size="20">
 <input type="File" name="nomefile" onchange="LoadImage()" size="20"> <input type="submit" value="Invia" name="upload" > <div align="center">
 <center>
 <table border="0" cellspacing="0" width="150" id="AutoNumber1" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" height="212">
 <tr>
   <td align="center" height="212">
      [img][/img]</td>
 </tr>
 </table>
 </center>
 </div>
 
</form>

</body>

Scusami tanto

ma non so prorpio come fare !!!

**Xinod** · 24-08-2003, 20:30

figurati, non c' è problema
non ho provato lo script, lo farò adesso,
ma forse avevi la soluzione in quello che già avevo scritto

Originariamente inviato da Xinod
IE (dalla versione 5 in poi) supporta tanto il DOM document.all
che quello document.getElementById

quest' ultimo è considerato standard ed è supportato da tutti i nuovi browser (opera, mozilla, nn6 o 7, safari etc...)

se provi con NN7 (bravo! personalmente preferisco l' identico ma + veloce mozilla) non può funzionare un
document.all["AvatarImage"].src=...
potrai cambiarlo in
document.getElementById('AvatarImage').src=...
o + semplicemente, trattandosi di un' immagine ed in quanto tale presente nell' array naturale (si dirà così?

) delle immagini con
document.images['AvatarImage'].src=...

**gabcaly** · 24-08-2003, 20:36

Ciao,

ho fatto delle ricerche e ho trovato qualcosa di molto interessante:

http://devedge.netscape.com/library/...nce/image.html

con questa versione funziona anche sotto IE . C'è solo un problema se indico un nome di file nello specifico: immagine.gif lo script me la va a visualizare con l'evento onLoad nel Body.

Se utilizzo un <input type="file" onChange="LoadImage()"> il percorso del file è privato dalle "/" e quindi non essendoci non riesce a caricarlo. :tongue:

**gabcaly** · 24-08-2003, 20:56

ci sono riuscito. Ippi Urraaaaaa !!!!! pero col select, adesso devo vedere con l' <input type="file"> ecc

codice:

<script language="javascript"> 

function LoadImage(form){ 
for (var conta= 0; conta < 1; conta++) {
 var immagine=new Image(); 
 immagine.src= form.box.options[form.box.selectedIndex].text; 
 
 alert(immagine.src); 

}
 document.AvatarImage.src=immagine.src;
} 

</script>

codice HTML:
<body >

<form method="POST" name="FormImage" action="../upload.asp">
<select size="1" name="box" onChange="LoadImage(this.form)">
<option value="arman.gif">arman.gif</option>
<option>candela.gif</option>
</select>
<input type="submit" value="Invia" name="upload" >

<div align="center">
<center>
<table border="0" cellspacing="0" width="150" cellpadding="0" height="212">
<tr>
<td align="center" height="212">
[img][/img]</td>
</tr>
</table>
</center>
</div>

</form>

Discussione: JS: una specie di preload grafico

Strumenti discussione

Ricerca discussione

Visualizza

JS: una specie di preload grafico

Permessi di invio