Beh, il modo più semplice è mettere come src di tutte le immagini la classica immagine di preloading, poi usando Javascript fare caricare le immagini in modo asicrono, sostiuendo il src a conclusione caricamento. (tranquillo: è molto più semplice di quanto sembri ;-P)
Passo 1: HTML
Inserisco solo il body, ma tu metterai anche l'head e l'HTML
Codice PHP:
<body>
<table width="100%">
<tr>
<td>
[img]imgs/preloading.gif[/img]
</td>
<td>
[img]imgs/preloading.gif[/img]
</td>
<td>
[img]imgs/preloading.gif[/img]
</td>
<td>
[img]imgs/preloading.gif[/img]
</td>
<td>
[img]imgs/preloading.gif[/img]
</td>
</tr>
<tr>
<td>
[img]imgs/preloading.gif[/img]
</td>
<td>
[img]imgs/preloading.gif[/img]
</td>
<td>
[img]imgs/preloading.gif[/img]
</td>
<td>
[img]imgs/preloading.gif[/img]
</td>
<td>
[img]imgs/preloading.gif[/img]
</td>
</tr>
</table>
</body>
Come puoi notare ad ogni immagine ho messo il src a imgs/preloading.gif, tu lo cambierai con la tua immagine di preloading. Inoltre, ogni img ha un attributo rel = la giusta immagine da caricare dopo l'apertura della pagina.
Passo 2 : Javascript
Il javascript è molto semplice:
Codice PHP:
function setPreloading()
{
var imgs = document.getElementsByTagName('img');
for(i = 0; i < imgs.length; i++)
{
if(imgs[i].getAttribute('rel')){
var imge = new Image();
imge.setAttribute('index', i);
imge.onload = function(){
imgs[this.getAttribute('index')].src = imge.src;
}
imge.src = imgs[i].getAttribute('rel');
}
}
}
window.onload = setPreloading;
Il funzionamento è il seguente:
l'ultima riga associa come funzione all'evento onload della pagina la funzione setPreloading.
la funzione fa innanzitutto una ricerca nel document per tutti gli elementi con tag img (tutte le immagini insomma), poi effettua un ciclo per ogni elemento img, se l'immagine ha l'attributo rel settato ( quel if(imgs[i].getAttribute('rel')) effettua questo controllo ) allora instanzia un oggetto Image (che serve a manipolare le immagini) salvandolo in imge, a questo oggetto setta come attributo index l'indice dell'array di immagini corrispondente all'immagine che deve caricare.
A questo punto crea una funzione per l'evento onload dell'immagine. Questo semplicemente sostituisce il src dell''immagine corrispondente con l'immagine caricata dall'oggetto imge.
Infine, setta l'src di imge con il contenuto del rel (l'immagine da caricare) attivando il download della stessa.
Passo 3: il tutto
Per farlo funzionare, semplicemente metti il codice che ti ho postato in un
<script type="text/javascript"> </script>
Dovrebbe andare: io l'ho provato, anche se con una sola immagine, su Firefox 3, su Opera 9 e IE 7
Rispondi quotando
grazie!
