Preload semplice?

**angela71** · 30-03-2005, 10:59

ciao, sto cercando un preload per far sì che la pagina si apra solo dopo che alcune determinate immagini siano state caricate.
mi serve la cosa più semplice possibile, ho trovato tante cose ma mi si sono solo confuse le idee...
non voglio pagine di preload, non voglio messaggi, non voglio aspettare il caricamento di tutta la pagina...

in definitiva: ho una dozzina di immagini da caricare, dopodichè la pagina può aprirsi, anche se non completa.
tutto qui. :rollo:

come si fa?
grazie!

**Mich_** · 30-03-2005, 11:38

Potresti fare un precaricamento delle immagini nella head:

codice:

<head>
...
<script type="text/javascript">
var lista = new Array("immagine1.gif", "immagine2.jpg", ...);
var preimm = new Array();
for(var i=0; i<lista.length; i++) {
  preimm[i] = new Image;
  preimm[i].src = lista[i];
}
</script>
...
</head>
<body>
... il resto dell apagina come il solito ...

**angela71** · 30-03-2005, 11:45

grazie, direi che è quello che cercavo, stasera provo e poi ti so dire.
ciao!

**angela71** · 31-03-2005, 13:51

curioso!!!
il preload ha una sua utilità in quanto fa caricare il menù per primo e riduce il rischio di passarci sopra col mouse prima del caricamento (con conseguente difetto), ma :master: il problema RESTA!!
il difetto c'è ancora (vedi http://www.associazioneavvocatifaentini.it), non c'è modo...
non capisco proprio: nessuno di voi ha lo stesso problema?
e dire che penso che il mio codice per il rollover sia abbastanza diffuso!

**Mich_** · 31-03-2005, 14:59

Un errore (mio) che non so quanto sia imporetante nei browser:
preimm[i] = new Image();
(mancano le parentesi dopo Image)

Una cosa che non capisco:
cosa e` l'attributo hsrc di un'immagine?

Questo credo che non abbia senso:
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
Come fai a dare un attributo al sorgente di un oggetto?

Alktra cosa che credo sbagliata:
this.setAttribute('src',this.getAttribute('hsrc'))
applicato ad una funzione JS: le funzioni nonhanno attributi (che io sappia)

Inoltre dovresti eliminare i tag e gli attributi di formattazione e spostere tutto nel CSS, altrimenti rischi di creare conflitti tra formattazione HTML e CSS.

Prendi questo come manuale di riferimento per HTML:
http://www.w3schools.com/xhtml/xhtml_reference.asp

**angela71** · 04-04-2005, 21:05

eccomi di nuovo qua.
la correzione del tuo errore purtroppo non ha portato a miglioramenti.
Riguardo alle varie cose su cui nutri dubbi, non so, io da non professionista mi fido del sito html.it che ospita questo forum, e dal quale ho tratto il codice che ho usato:

codice:

<script type="text/javascript">
function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;
</script>

La pagina in questione è http://www.html.it/mailing/archivio/a224/index.html

Dunque... cosa ne pensi?
Sono abbattuta per non essere riuscita a risolvere questa cosa...

**Mich_** · 05-04-2005, 09:20

Mi chiedi cosa ne penso ...
Puo` darsi che quello script funzioni, ma utilizza strutture HTML non standard, per cui non aspettarti che funzioni in tutti i browser.

Io userei un rollover semplice classico, tramite JS o tramite CSS (funziona anche dove i JS sono disabilitati).

Dovrei conoscere qualcosa di piu` del tuo problema per poterti consigliare l'uno o l'altro.

Le immagini possono essere messe come sfondo di qualche oggetto?
Quanto sono pesanti le immagini?
A che serve il rollover? Ha un significato semantico o e` solo un abbellimento?

**angela71** · 05-04-2005, 09:47

Un rollover semplice classico... non è che poi ha il difetto di avere un ritardo al cambio dell'immagine? Cito la pagina di html.it da cui ho tratto il codice:

(...) Con i normali javascript, infatti, siamo soggetti ad un leggero ritardo nel cambio da un'immagine all'altra (dipendente soprattutto dalla velocità di connessione e del server). Con il codice di oggi invece, che sfrutta l'attributo "hsrc", non avremo questo problema (...)

Poi, ti rispondo:
- non ho capito cosa intendi con "Le immagini possono essere messe come sfondo di qualche oggetto"
- le immagini, a seconda dei siti, pesano da 5 a 8 k
- le mie esigenze sono solo estetiche

... magari potresti mostrarmi quello che chiami un rollover semplice classico, tramite JS?

Grazieeeee

**Mich_** · 05-04-2005, 10:29

Rollover semplice in JS:

codice:

<script type="text/javascript">
var lista = new Array("unoh.gif", "dueh.jpg", ...);
var preimm = new Array();
for(var i=0; i<lista.length; i++) {
  preimm[i] = new Image;
  preimm[i].src = lista[i];
}

</script>
</head>
<body>
...
[img]uno.gif[/img]
...

Si puo` accelerare un pelo (in certi browser/sistemi), usando codice piu` specifico sia nel preload che nel rollover.

Discussione: Preload semplice?

Strumenti discussione

Ricerca discussione

Visualizza

Preload semplice?

Permessi di invio