Newsgroup: it.comp.lang.javascript
Titolo: visualizzare immagine solo dopo suo caricamento

Salve,
      questo è il codice della pagina in questione...ogni 20 secs carica 
una nuova immagine dal server ma vorrei che l'ultima immagine sia 
visibile (prenda il posto della precedente) solo quando è stata caricata 
completamente:
codice:
<html>
<head>
<title>::NaioSPy::</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" 
/>
<script language="javascript1.2" type="text/javascript">
<!--
function prendiElementoDaId(id_elemento) {
   var elemento;
   if(document.getElementById)
      elemento = document.getElementById(id_elemento);
   else
      elemento = document.all[id_elemento];
   return elemento;
};
function LoadXMLDoc(url) {
   // branch for native XMLHttpRequest object
   if (window.XMLHttpRequest) {
      req = new XMLHttpRequest();
      req.onreadystatechange = processReqChange;
      req.open("GET", url, true);
      req.send(null);
   // branch for IE/Windows ActiveX version
   } else if (window.ActiveXObject) {
      isIE = true;
      req = new ActiveXObject("Microsoft.XMLHTTP");
      if (req) {
         req.onreadystatechange = processReqChange;
         req.open("GET", url, true);
         req.send();
      }
   }
};
function processReqChange() {
   // only if req shows "loaded"
   if (req.readyState == 4) {
   // only if "OK"
      if (req.status == 200) {
      // ...processing statements go here...
      prendiElementoDaId('naietto').innerHTML = req.responseText;
      } else {
         alert(req.statusText);
      }
   }
};
function LoadIMG() {
 
   url = "naiospy.cgi?action=newimage";
   LoadXMLDoc(url);
};
function MainStart() {
   LoadIMG();
   window.setInterval('LoadIMG()', 20000);
}
//-->
</script>
<style type="text/css">
<!--
body {
   margin: 5px;
   padding: 5px;
   background: #ccc;
}
a {
   color: blue;
   font: 15px Arial;
}
a:visited {
   color: blue;
}
a:hover {
   color: red;
}
div#naietto {
   width: 800px;
   height: 600px;
   background: #eee;
   border: 1px dashed #333;
   padding: 5px;
   margin: 10px;
}
h2 {
   border: 1px dashed yellow;
   background: #999;
   padding: 5px;
}
div#navbar {
   font: 13px Verdana;
}
//-->
</style>
</head>
<body onLoad="MainStart();">
<div id="navbar">
   <a href="naiospy.cgi">Index</a>
   <h2>::NaioSPy::</h2>
   <div align="center"><p>!!! LIVE !!! From: <b>claudio</b> 
[127.0.0.1]</p></div>
</div>
<div align="center">
   <div id="naietto"> </div>
</div>
</body>
</html>

 };
Ma se il tuo scopo è solo quello di caricare un immagine, puoi usare
l'oggetto Image. E' anche più retrocompatibile.
Un po' di codice su cui partire:
	var img = new Image();
	img.onload = function(){
		var nd = document.getElementById("pic");
		nd.src = this.src;
		nd.style.visibility = "visible";
	}
	img.onerror = function(){
		alert("Immagine non caricata");
	}
 
	/*
		questo fa partire la richiesta al server
	*/
	img.src = "mypic.jpg";
Ovviamente nell'HTML deve esserci un tag IMG con id "pic":
<body>
	<p>
		bla bla bla
	</p>
	<img id="pic" src="qualcosa_o_anche_nulla.gif"
style="visibility:hidden" border="0" />
	<p>
		bla bla bla
	</p>
</body>
Se cerchi in google gruppi, comunque, troverai un sacco di notizie e
informazioni in merito al caricamento di un immagine in questo modo,
negli archivi di questo newsgroup.
Hope it helps.
-- 
~ Neanche il futuro e' piu' quello di una volta.

 </body>
e proprio questo che non riesco a capire...l'immagina appena è caricata 
completamente viene mostrata...ma la prossima che verrà caricata tra 20 
secondi? bisognera ri-rendere invisibile l'immagine?

 secondi? bisognera ri-rendere invisibile l'immagine?
No, quello serve solo perché la prima volta non hai un'immagine da
mostrare. Se invece ne hai una di default, allora puoi anche far a
meno di impostare la visibilità.
Appena la nuova immagine verrà caricata, andrà a sostituire quella
precedente, semplicemente.
Per intenderci, riprendendo il codice di prima:
	var img = new Image();
	img.onload = function(){
		var nd = document.getElementById("pic");
		nd.src = this.src;
		nd.style.visibility = "visible";
	}
	img.onerror = function(){
		alert("Immagine non caricata");
	}
	img.src = "prima.jpg"; /* fa partire la richiesta dell'immagine */
	/* dopo 20 sec fa partire la richiesta della seconda immagine */
	setTimeout("img.src='seconda.jpg'",20000); 
Ripeto, è una traccia sulla quale lavorare, serve solo a mostrarti
l'approccio da usare.
-- 
~ Ci siamo fatti una scopata cosi' eccezionale che anche i vicini
hanno fumato una sigaretta.

 l'approccio da usare.
il fatto è che questo codice mi riporta il valore "undefined" nel tag 
<img>
<script language="javascript1.2" type="text/javascript">
<!--
var img = new Image();
img.onload = function()
{
   var nd = document.getElementById("pic");
   nd.src = this.src;
}
img.onerror = function()
{
   alert( "Immagine non caricata" );
}
img.src = "chef.jpg";
//-->

 <script language="javascript1.2" type="text/javascript">
E due: rimuovi language, è deprecated.
-- 
~ Tutti quelli che credono nella psicocinesi,
per favore alzino la mia mano.

 e quello funziona
http://www.theartofweb.net/_iclj/ricarica.html

> o comunque dopo che il tag img è stato aggiunto).
Fai caricare al browser l'immagine prima che questo abbiamo letto il
tag <img>, e quindi aggiunto al document tree.
-- 
~ "La fantasia è come la marmellata,
bisogna spalmarla su un solido pezzo di pane."
(Gore Vidal)

 tag <img>, e quindi aggiunto al document tree.
ti giuro non riesco a capire...anche in virtù dei caricamenti che dovrà 
fare succesivamente: ( <img>, e quindi aggiunto al document tree.) 
credevo intendessi questo...man non funziona nemmeno:
<html>
<head>
<title>it.comp.lang.javascript</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" 
/>
<script type="text/javascript">
<!--
var img = new Image();
img.onload = function()
{
   var nd = document.getElementById("pic");
   nd.src = this.src;
}
img.onerror = function()
{
   alert( "Immagine non caricata" );
}
//-->
</script>
</head>
<body onLoad="img.src = 'chef.jpg';">
<img id="pic" name="pic" border="0" />
</body>
</html>

 <img id="pic" name="pic" border="0" />
Mai mettere name e id uguali, rischi problemi, soprattutto su IE.
-- 
~ "Solo i morti hanno visto la fine della guerra."
(Platone)

 essere il seguente.
ho provato il seguente codice:
<html>
<head>
<title>it.comp.lang.javascript</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" 
/>
<script type="text/javascript">
<!--
var img = new Image();
img.onload = function(){
   var nd = document.getElementById("pic");
   nd.src = this.src;
}
img.onerror = function(){
   alert( "Immagine non caricata" );
}
window.onload = function(){
   img.src = "chef.jpg";
}
//-->
</script>
</head>
<body>
<img id="pic" border="0" />
</body>
</html>
puo essere che con safari su mac os x questo tipo di javascript non 
funzioni??
grazie

 funzioni??
Con che versione, di Safari? Te lo chiedo visto che ora è uscita la 3.
Guarda, tutto può essere: ci sono browser che hanno bug allucinanti, e
magari Safari 2 e/o 3 non supporta correttamente l'oggetto Image anche
se perfino Netscape 4 potrebbe fare una cosa del genere (ovviamente se
si sostituisce il getElementById).
Se me lo ricordo, in tarda serata posso 
-- 
~ "Il giusto altro non è che l'utile del più forte."
(Trasimaco)

 funzioni??
Con che versione, di Safari? Te lo chiedo visto che ora è uscita la 3.
Guarda, tutto può essere: ci sono browser che hanno bug allucinanti, e
magari Safari 2 e/o 3 non supporta correttamente l'oggetto Image anche
se perfino Netscape 4 potrebbe fare una cosa del genere (ovviamente se
si sostituisce il getElementById).
Se me lo ricordo, in tarda serata posso buttarci un occhio. A casa, ho
un iBook con Safari sopra.


 Con che versione, di Safari?
2.0.4

 2.0.4
Con la 3, nessun problema apparente.
Il passaggio dalla 2 alla 3 è stato automatico, non ho quindi modo
di verificare se la precedente versione ha effettivamente dei bug.
-- 
"Se c'è qualcosa di più importante del mio ego su questa nave,
la voglio catturata e fucilata."

 di verificare se la precedente versione ha effettivamente dei bug.
incredibile...al contrario di Safari, con FireFox il tuo codice funziona 
perfettamente!!!

 perfettamente!!!
Ma non è "incredibile" ^^;
E' "incredibile" il fatto che su Safari dia dei problemi (e comunque,
ripeto, non sulla 3 di Safari), dato che quel codice lì non fa niente
di particolare e gira tranquillamente su browser vecchi di dieci anni
come Netscape 4, dato utilizza oggetti e statement consolidati.
-- 
~ La donna è un male, ma un male necessario.
(Aulo Gellio)