Re: visualizzare immagine solo dopo suo caricamento

#1

On Mon, 17 Dec 2007 07:08:26 +0100, Larry wrote:

Quote:

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:

script language="javascript1.2" type="text/javascript"

Lascia perdere il language, è deprecated. E poi ormai siamo alla 1.7

Quote:

function prendiElementoDaId(id_elemento) {
var elemento;
if(document.getElementById)
elemento = document.getElementById(id_elemento);
else
elemento = document.all[id_elemento];
return elemento;
};

T'interessa la compatibilità con IE4? Non penso, perché in tal caso,
non useresti neppure l'XmlHttpRequest.

Quindi puoi fare a meno di questa funzione e usare il getElementById
direttamente.

Quote:

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.

#2

In article <1fghm78rbhsw9$.dlg (AT) ID-171124 (DOT) news.individual.net>,
ZER0 <zer0.shock (AT) libero (DOT) it> wrote:

Quote:

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

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?

#3

On Mon, 17 Dec 2007 17:49:19 +0100, Larry wrote:

[cut]

Quote:

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?

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.

#4

In article <chzen1t5rg43.dlg (AT) ID-171124 (DOT) news.individual.net>,
ZER0 <zer0.shock (AT) libero (DOT) it> wrote:

Quote:

Ripeto, è una traccia sulla quale lavorare, serve solo a mostrarti
l'approccio da usare.

il fatto è che questo codice mi riporta il valore "undefined" nel tag
<img>

<script language="javascript1.2" type="text/javascript">

#5

On Tue, 18 Dec 2007 15:33:25 +0100, Larry wrote:

Quote:

Ripeto, è una traccia sulla quale lavorare, serve solo a mostrarti
l'approccio da usare.

il fatto è che questo codice mi riporta il valore "undefined" nel tag
img

Spiegati meglio, perché detta così non è molto chiaro. Inoltre non hai
scritto il codice HTML, hai riportato solo il codice JS che ti ho dato
e quello funziona (giusto per scrupolo, l'ho fatto "girare").
Va da sé che la richiesta al server la devi far partire solo quando il
document tree è stato già creato (quindi nell'evento onload di window,
o comunque dopo che il tag img è stato aggiunto).

Quote:

script language="javascript1.2" type="text/javascript"

E due: rimuovi language, è deprecated.

--
~ Tutti quelli che credono nella psicocinesi,
per favore alzino la mia mano.

#6

In article <caac4428wqen$.dlg (AT) ID-171124 (DOT) news.individual.net>,
ZER0 <zer0.shock (AT) libero (DOT) it> wrote:

Quote:

Spiegati meglio, perché detta così non è molto chiaro. Inoltre non hai
scritto il codice HTML, hai riportato solo il codice JS che ti ho dato
e quello funziona

http://www.theartofweb.net/_iclj/ricarica.html

#7

On Tue, 18 Dec 2007 16:07:27 +0100, Larry wrote:

Quote:

Spiegati meglio, perché detta così non è molto chiaro. Inoltre non hai
scritto il codice HTML, hai riportato solo il codice JS che ti ho dato
e quello funziona

http://www.theartofweb.net/_iclj/ricarica.html

Immagino che tu non abbia continuato la lettura del mio post, perché
altrimenti avresti trovato anche questa parte, che non hai riportato
e che spiega l'errore che hai fatto:

Quote:

Va da sé che la richiesta al server la devi far partire solo quando il
document tree è stato già creato (quindi nell'evento onload di window,
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)

#8

On Tue, 18 Dec 2007 16:28:22 +0100, Larry wrote:

Quote:

Fai caricare al browser l'immagine prima che questo abbiamo letto il
tag <img>, e quindi aggiunto al document tree.

ti giuro non riesco a capire...

Prendendo il codice di cui mi hai passato il link, un modo potrebbe
essere il seguente. Sostituisci:

img.src = "chef.jpg";

con:

window.onload = function(){
img.src = "chef.jpg";
}

Quote:

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)

#9

On Tue, 18 Dec 2007 16:41:26 +0100, Larry wrote:

Quote:

Prendendo il codice di cui mi hai passato il link, un modo potrebbe
essere il seguente.

ho provato il seguente codice:
[cut]
puo essere che con safari su mac os x questo tipo di javascript non
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)

#10

On Tue, 18 Dec 2007 16:41:26 +0100, Larry wrote:

Quote:

Prendendo il codice di cui mi hai passato il link, un modo potrebbe
essere il seguente.

ho provato il seguente codice:
[cut]
puo essere che con safari su mac os x questo tipo di javascript non
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.

--
~ "Il giusto altro non è che l'utile del più forte."
(Trasimaco)