Scorrimento immagini con preload

**stefano.carb** · 17-05-2005, 18:13

Secondo voi non dovrebbe funzionare anche come preload immagini??? xchè a quanto pare mi carica l'immagine solo dopo che clicco sulla freccia per andare avanti.

<html>
<head>
<script language="JavaScript" type="text/javascript">
n=0
foto=new Array()
foto[0]="images/disegni/01.jpg"
foto[1]="images/disegni/02.jpg"
foto[2]="images/disegni/03.jpg"
foto[3]="images/disegni/04.jpg"
foto[4]="images/disegni/05.jpg"

function avanti() {
if(n<4) {
n++
document.foto.src=foto[n]
}
}
function indietro() {
if(n>0) {
n--
document.foto.src=foto[n]
}
}
</script>

</head>
<body bgcolor="#000000">
<script type="text/javascript" language="javascript1.2" src="menu/menu.js"></script>

<div align="center">

<table width="700" height="450" border="0">
<tr>
<td align="center">
[img]images/disegni/01.jpg[/img]</td>
</tr>
</table>
<table width="400" cellspacing="0" cellpadding="0" border="0" style="border:1px dashed rgb(64,64,64);">
<tr>

<td><p align="right">[img]images/indietro.gif[/img]</p></td>
<td width="50"><p align="right">[img]images/avanti.gif[/img]</p></td>
</tr>
</table>

</div>
</body>
</html>

Grazie!

**Mich_** · 18-05-2005, 09:14

Direi proprio di no.

Quale sarebbe il pezzo di codice che fa il preload?

**stefano.carb** · 18-05-2005, 09:46

Come si potrebbe modificare???
Solo aggiungendo un preload???
Siccome a codice non sono molto ferrato...e forse si è visto, non vorrei dover ripetere più volte l'inserimento delle immagini da caricare.

Tks!

**Mich_** · 18-05-2005, 10:55

Devi aggiungere un loop che faccia il proload delle immagini.
Dopo la lista dei nomi, aggiungi:

codice:

n=0
var foto = new Array();
foto[0] = "images/disegni/01.jpg";
foto[1] = "images/disegni/02.jpg";
...

var precar = new Array();
for(var i=0; i<foto.length; i++) {
  precar[i] = new Image();
  precar[i].src = foto[i];
}

**stefano.carb** · 18-05-2005, 11:23

GRANDE!!!!!
Funge alla grande anche su Firefox!

Ma a questo punto approfitto e ci provo:
non ci sarebbe un modo per far sparire la freccia avanti una volta arrivati all'ultima immagine????

Se la cosa è dura non preoccuparti, mi sei già stato di grande aiuto.

Grazie!!!!

**Mich_** · 18-05-2005, 11:41

codice:

function avanti() {
  if(n < precar.length) {
    n++;
    document.foto.src = precar[n].src;
  }
  document.getElementById('avanti').visibility = (n>=precar.length-1) ? 'hidden' : 'visible';
}

dove pero` il bottone va scritto:
<a href="#" onclick=avanti(); return false;">
[img]images/avanti.gif[/img]</a>

e dovrai inserire uno CSS opportuno con le caratteristiche di stile del bottone.

Per il bottone "indietro" sara` una cosa simile.

**stefano.carb** · 18-05-2005, 12:06

Mi da errore, anche aggiungendo le virgolette mancanti a <a href="#" onclick="avanti(); return false;">

xchè un CSS? il bottone è una img

**Mich_** · 18-05-2005, 12:17

Scusa per le virgolette.
Veramente non ci sono bottoni nella pagina (almeno non nel pezzo dicui hai postato lo script).

Ho inserito un altro errore. Ci sono due oggetti con lo stesso nome (avanti): l'immagine e la funzione: uno dei due deve cambiare.

Perche` i CSS?
- perche` e` opportuno separare contenuto da presentazione
- perche` sono obbligatori nelle nuove versioni di (X)HTML
- perche` se usi formattazione HTML poi la formattazione CSS (usata nello script e necessaria in questo caso) potrebbe non funzionare

Tieni conto che tutta la tua pagina andrebbe rivista.

**stefano.carb** · 18-05-2005, 12:43

Ancora nulla.....sicuramente sono io!!!
Ho sostituito la funzione avanti attuale con

function avanti() {
if(n < precar.length) {
n++;
document.foto.src = precar[n].src;
}
document.getElementById('f_avanti').visibility = (n>=precar.length-1) ? 'hidden' : 'visible';
}

e la riga della freccia avanti con

<a href="#" onclick="avanti(); return false;">
[img]images/avanti.gif[/img]</a>

**Mich_** · 18-05-2005, 16:05

C'e` in effetti ancora un errore, ma dovrebbe dirtelo il browser. Altrimenti devi settare qualche opzione per farti visualizzare gli errori javascript, altrimenti non riesci a fare il debug.

document.getElementById('f_avanti').style.visibility = (n>=precar.length-1) ? 'hidden' : 'visible';
}

Discussione: Scorrimento immagini con preload

Strumenti discussione

Ricerca discussione

Visualizza

Scorrimento immagini con preload

Permessi di invio