preload e immagine caricata...

[Luke_Sky]

ciao a tutti quelli collegati anche a quest'ora.
la mia situazione è la seguente:

questo non è il solito post per il preload immagini; ho già cercato con varie parole chiave quello che stò x chiedervi, ma senza successo.

1. vorrei semplicemente precaricare una GIF un po' pesantina (300Kb):

var animation = new Image();
animation.src = "images/box/slide.gif";

2. e visualizzarla SOLO quando è completamente caricata.

ho visto che esiste la proprietà [.complete] x vedere se l'immagine è in cache, ma come faccio poi a rendere non visibile/visibile la mia gif da 300K??

la funzione dovrebbe essere questa (ricavata sempre dal forum):

function misura() {
if (imageT.complete) { // e' stata caricata?
... cosa devo scrivere QUI?
} else {
setTimeout("misura()",100)
}

3. l'immagine adesso viene visualizzata così:

<td width="230" height="114" background="images/box/loading.gif" class="no_back_repeat">[img]images/box/slide.gif[/img]</td>

notate che ho messo un'immagine di sfondo che viene visualizzata subito, mentre l'img è quella che dovrebbe essere soggetta al preload.

grazie a tutti x l'attenzione. confido in voi

Lk

[Luke_Sky]

nel caso possa servire a qualcuno in futuro...

questo lo script da includere:

<script language="JavaScript">
<!--
//inizio sezione script

// ** preload immagini GIF **
//immagine di attesa
var image_loading = new Image();
image_loading.src = "images/box/loading.gif";
//immagine finale
var image_slide = new Image();
image_slide.src = "images/box/slide.gif";
setTimeout("timer()",100)

document.getElementById("image_slide").style.displ ay = "none"; //nascosto
document.getElementById("image_loading").style.dis play = ""; //visibile

function timer()
{
//controlla se è stata caricata l'immagine "image_slide"
if (image_slide.complete)
{
document.getElementById("image_slide").style.displ ay = ""; //visibile
document.getElementById("image_loading").style.dis play = "none"; //nascosto
}
else
{
setTimeout("timer()",100)
}
}

//fine sezione script
-->
</script>

e questo è il codice HTML:

<td width="230" height="114">[img]images/box/loading.gif[/img][img]images/box/slide.gif[/img]</td>

così otterrete un'imagine di preload visibile fino a quando non viene caricata del tutto l'immagine finale.

per ora l'ho testato solo su IE 6.0

ciao a tutti, belli e brutti.

[Luke_Sky]

ATTENZIONE!
nello script precedente bisogna lasciare l'immagine di attesa in background, altrimenti si ha uno shift del tutto (che errore idiota, e dire che nel primo post lo avevo fatto giusto).

il codice si semplifica in questa maniera:

<script language="JavaScript">
<!--
//inizio sezione script

// ** preload immagini GIF **
//immagine di attesa
var image_loading = new Image();
image_loading.src = "images/box/loading.gif";
//immagine finale
var image_slide = new Image();
image_slide.src = "images/box/slide.gif";
setTimeout("timer()",100)

document.getElementById("image_slide").style.displ ay = "none"; //nascosto

function timer()
{
//controlla se è stata caricata l'immagine "image_slide"
if (image_slide.complete)
{
document.getElementById("image_slide").style.displ ay = ""; //visibile
}
else
{
setTimeout("timer()",100)
}
}

//fine sezione script
-->
</script>

HTML:

<td width="230" height="114" background="images/box/loading.gif" id="image_loading" style="background-repeat: no-repeat;">[img]images/box/slide.gif[/img]</td>

l'ho testato anche con Opera, Mozilla e Netscape:OK. Con Mozilla FireFox non funzica!

bye bye Lk

[Luke_Sky]

ho notato che (non sempre) la pagina funzia ma da un errorino...

l'istruzione

document.getElementById("image_slide").style.displ ay = "none"; //nascosto

bisogna metterla IN FONDO al codice HTML tra i tag <script></script>

altrimenti js cerca di appioppare uno stato ad un oggetto non ancora creato, generando così l'errore.

bye. STOP.