Newsgroup: it.comp.lang.javascript
Titolo: Visualizzazione di un'immagine mentre ne carica un'altra

Scusate l'oggetto bello lungo ma non sapevo come spiegare la cosa.
Ho una tabellina con delle immagini piccole e se ci pigi fa vedere
quella pigiata grossa semplicemente, in locale tutto ok ma su internet
essendo le immagini di dimensioni abbastanza grosse tra il click sulla
piccola immagine e la vera visualizzazione passano secondi in qui
sembra non succeda niente.
Alchè cerco una soluzione:
- non posso prelodare tutte le immagini perchè sarebbe un carico
troppo grosso
- un'animazione mentre carica? bho
- ultima soluzione far visualizzare un'altra immagine che fa loading
finchè non ha finito di caricare
provo con la 3° usando un bel while sfruttando la proprietà complete
delle immagini, una cosa del   genere:
echo "function changeImage(name,image)
{
   if(document.images)
   {
      toVisualize.src = image
      document[name].src=\"./img/loading.jpg\"
      while(!(toVisualize.complete))
      {
      }
      document[name].src=image
   }
}
in poche parole non funziona, è il primo che faccio...
altrimenti altre soluzioni? che consigliate? grazie
CIAO ALE

 echo "function changeImage(name,image)
Devi dare tempo al browser di visualizzare le modifiche ... io
semplicemente farei un qualcosa del tipo (Detta miaimg il nome
dell'immagine da visualizzare):
 document.images[name].src="loading";
 setTimeout("tuafunction('"+miaimg+"')",200);
function tuafunction(miaimg) {
 img=new Image();
 img.onload=function() {
   document.images[name].src=this.src;
 }
 img.src=miaimg;
}
-- 
"Run rabbit run
 dig that hole, forget the sun
 and when at last the work is done
 don't sit down, it's time to dig another one"
									    P.F.

hai provato a usare nel html il tag lowsrc=""
forse potrebbe esserti utile
ciao Hydra
-- 
http://www.trovashop.it
http://www.internetdiscount.it

Grazie mille delle risposte, ganzetta anche quella di lowsrc che non
conoscevo, comunque ho trovato un'altra soluzione che mi è piaciuta
parecchio ve la descrivo perchè è giusto che ci sia se qualcuno
cercasse una cosa simile...
in pratica visualizzo sull'immagine vecchia una gif trasparente con su
scritto "loading", naturalmente uno ci può mettere quello che gli
pare, e quando è stata caricata la nuova immagine viene visualizzata e
scompare il loading. Così l'utente capisce che sta succedendo qualcosa
nonostante passi un po' di tempo prima che venga visualizzata la nuova
immagine, tempo che non può essere evitato pultroppo e quindi sfrutto
l'evento onLoad dell'immagine
per farlo ho aggiunto:
<div id="loading"><img src="./img/loading.gif"></div>
e come stile una cosa del genere:
#loading {position:absolute; width:25%; margin:0 auto;
text-align:center;}
(comunque devo sistemarlo per farlo più bellino)
aggiungo una funzione:
function finishLoading(name)
{
document.getElementById(name).style.visibility ="hidden"
}
sull'mmagine che viene visualizzata uso l'evento onLoad:
<img name="image" src="img.jpg" onLoad="finishLoading('loading')">
e nella funzione in cui faccio il change dell'immagine da visualizzare
subito prima del comando:
document[name].src=image
aggiungo:
document.getElementById("loading").style.visibility ="visible"
in modo da rendere visibile il <div> del loading prima che inizi a
caricare la nuova immagine
Grazie dei consigli un salutone
CIAO ALE