Preload immagini

**Braco** · 01-03-2007, 20:18

Ho questo codice Java che richiama i thumbs, è possibile mettere un codice che precarica i thumbs?

codice:

<ja:else>
[img]$thumbPath[/img]
</ja:else>

**Andrea1979** · 02-03-2007, 13:12

In javascript, non credo in jsp/struts/php/asp/cgi semplicemente perché esegui codice lato server (il quale può mandare poi dell'output al browser). Tu vuoi che l'immagine sia pre-caricata nel browser per cui è al browser che deve arrivare. Fai una ricerca nella sezione javascript.

**Braco** · 02-03-2007, 19:33

Originariamente inviato da Andrea1979
In javascript, non credo in jsp/struts/php/asp/cgi semplicemente perché esegui codice lato server (il quale può mandare poi dell'output al browser). Tu vuoi che l'immagine sia pre-caricata nel browser per cui è al browser che deve arrivare. Fai una ricerca nella sezione javascript.

Ne ho trovati anche in questo sito ce ne sono 7 di script, vedo che ci sono codici semplici e altri con un JS che viene richiamato nella pag. quale tipo secondo te è il migliore? Eppoi, bisogna proprio inserire a mano nell'array ogni immagine?

**Andrea1979** · 03-03-2007, 09:22

no l'immagine puoi farla inserire lato server passandogli la cartella che contiene i files e facendogli leggere i nomi oppure, se le immagini hanno un solido schema per i nomi (tipo img_001.jpg, img_002.jpg etc etc) puoi semplicemente far stampare il contenuto dell'array javascript con un ciclo for opportuno.

**Braco** · 03-03-2007, 09:27

Originariamente inviato da Andrea1979
no l'immagine puoi farla inserire lato server passandogli la cartella che contiene i files e facendogli leggere i nomi oppure, se le immagini hanno un solido schema per i nomi (tipo img_001.jpg, img_002.jpg etc etc) puoi semplicemente far stampare il contenuto dell'array javascript con un ciclo for opportuno.

Ho questo codice, non ho immagini singole, quelle sono nella cartella iniziale, poi il codice le trasforma così:

codice:

<ja:else>
[img]$thumbPath[/img]
</ja:else>

**Braco** · 03-03-2007, 10:56

Originariamente inviato da Andrea1979
no l'immagine puoi farla inserire lato server passandogli la cartella che contiene i files e facendogli leggere i nomi oppure, se le immagini hanno un solido schema per i nomi (tipo img_001.jpg, img_002.jpg etc etc) puoi semplicemente far stampare il contenuto dell'array javascript con un ciclo for opportuno.

Ho messo questo ma non vedo differenze, la foto non si precarica
index.htt è il frame con i thumbs
slide è il frame dove appare l'immagine originale quando viene cliccato sul thumbs.

stile.css

codice:

img.preload {
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 0px;
	height: 0px;
}

index.htt

codice:

<ja:if exists="slide">
<div>
[img]<%= next.get([/img]" alt="" title="Next image preloaded" />
</div>
</ja:if>

**Andrea1979** · 03-03-2007, 11:09

Quello è CSS, non javascript. Per esempio, il preload di default di DreamWeaver è:
(Nel tag head)

codice:

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

Poi sempre nel tag head oppure (all'evento onload del body) puoi far pre-caricare le immagini:

in <head>

codice:

window.onload = function() {
  MM_preloadImages('img1.jpg','img2.jpg','img3.jpg'....'imgn.jpg');
}

oppure:
nell'onload di body

codice:

<body onload="MM_preloadImages('img1.jpg','img2.jpg','img3.jpg'....'imgn.jpg');" ...>

Per generare la lista delle immagini, ripeto, puoi utilizzare il tuo linguaggio lato server (e fare quindi dell'output a browser) nel modo che ritieni più opportuno.

**Braco** · 03-03-2007, 11:58

Originariamente inviato da Andrea1979
Quello è CSS, non javascript. Per esempio, il preload di default di DreamWeaver è:
(Nel tag head)

codice:

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

Poi sempre nel tag head oppure (all'evento onload del body) puoi far pre-caricare le immagini:

in <head>

codice:

window.onload = function() {
  MM_preloadImages('img1.jpg','img2.jpg','img3.jpg'....'imgn.jpg');
}

oppure:
nell'onload di body

codice:

<body onload="MM_preloadImages('img1.jpg','img2.jpg','img3.jpg'....'imgn.jpg');" ...>

Per generare la lista delle immagini, ripeto, puoi utilizzare il tuo linguaggio lato server (e fare quindi dell'output a browser) nel modo che ritieni più opportuno.

Iserisco il tuo codice, qui posso modificare così:
Tuo codice
<body onload="MM_preloadImages('img1.jpg','img2.jpg','im g3.jpg'....'imgn.jpg');" ...>

Mio?

codice:

...
<script language="JavaScript" type="text/javascript">
//$thumbsPath sono le immagini thumbs
window.onload = function() {
  MM_preloadImages("$thumbsPath");

//$imagePath sono le immagini originali
window.onload = function() {
  MM_preloadImages("$imagePath");
..
</script>

**alka** · 03-03-2007, 16:50

JavaScript NON è Java. Sposto la discussione nel forum appropriato.

**Braco** · 03-03-2007, 20:16

Andrea 1979,

ho messo il tuo codice nei 2 frame, nell'altro frame ho modificato la parola in rosso, ho verificato il file output.html e ogni file.html contiene questo codice con il nome della foto.jpg perciò vengono precaricate sul server, non so se sia meglio o peggio per chi visita il sito, tu che dici?

Mi sembra che il caricamento non sia velocissimo, puoi verificare col tuo broswer e farmi sapere? http://photoman.altervista.org/gallery-out/index.html

<script language="JavaScript" type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
window.onload = function() {
MM_preloadImages("$thumbPath ");
}
</script>

Discussione: Preload immagini

Strumenti discussione

Ricerca discussione

Visualizza

Preload immagini

Moderazione

Permessi di invio