aggiungere preload a slideshow con troppe foto

[alitscha]

ciao a tutti, ho realizzato degli slideshow su un sito (anche grazie a dei consigli ricevuti qui sul forum!) con lo script che copio qui sotto.
Tutto funziona ma ci vuole troppo per caricare la pagina, mi piacerebbe poter aggiungere una funzione di preload delle prime 3-4 immagini tipo quella segnalata qui
http://javascript.html.it/articoli/l...con-preload/2/
non saprei come e dove inserire un codice simile all'interno dello slideshow
Qualcuno ha mai fatto una cosa simile e può consigliarmi come mettere insieme le due funzioni?

Ecco il codice (diminuisco qui il numero di immagini in lista per comodità, in realtà si tratta di sequenze di 40-50 immagini per pagina)

<script language="JavaScript">
<!--
var interval = 8000;
var random_display = 0;
var imageDir = "trees/";
var imageNum = 0;

didascalieArray = new Array();
imageArray = new Array();
didascalieArray[imageNum] = "Phillip Johnson's Glass House, Connecticut 2010";
imageArray[imageNum++] = new imageItem(imageDir + "27_trees.jpg");
didascalieArray[imageNum] = "Berlin 2009/2010";
imageArray[imageNum++] = new imageItem(imageDir + "01_trees.jpg");
didascalieArray[imageNum] = "Berlin 2009/2010";
imageArray[imageNum++] = new imageItem(imageDir + "02_trees.jpg");
didascalieArray[imageNum] = "Berlin 2009/2010";
imageArray[imageNum++] = new imageItem(imageDir + "03_trees.jpg");
didascalieArray[imageNum] = "Berlin 2009/2010";

var totalImages = imageArray.length;

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}

else {
imageNum = (imageNum+1) % totalImages;
}
var new_image = get_ImageItemLocation(imageArray[imageNum]);

document.getElementById("didascalia").innerHTML = didascalieArray[imageNum];
return(new_image);
}

function getPrevImage() {
if(imageNum-1 < 0) {
imageNum = totalImages-1;
}
else
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray[imageNum]);
document.getElementById("didascalia").innerHTML = didascalieArray[imageNum];
return(new_image);
}

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}

function switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}

// -->

</script>

[longilineo]

prova galleriffic

[alitscha]

grazie ancora longilineo!
il link è azzeccato e utile

il punto per me ora è che il sito funzionava già prima con un plugin jquery, mentre per me sarebbe interessante provare a imparare a implementare lo script che ho già con una funzione di preload delle prime immagini

sulla funzione di preload in sé non è difficile trovare consigli ed esempi
http://www.mediacollege.com/internet...e/preload.html
ma non conosco abbastanza bene javascript da sapere come e dove ficcare la nuova funzione nel codice che ho già

continuerò a smanettare e studiare su w3schools e siti simili ma se nel mentre qualcuno ha un suggerimento grazie! fosse anche un link a un buon tutorial generale su javascript...

[longilineo]

il miglior modo per fare preload, e anche il più semplice secondo me prescinde dall'utilizzo di javascript, nel link da te postato c'è qualcosa di simile a ciò che farei io(parlo dell'option 3).

Infatti le immagini di un documento (pagina html) vengono messe in cache e sono reperibili in maniera quasi istantanea all'intero documento dopo il primo caricamento, quindi basterebbe mettere le immagini in un div nascosto con css o ancora settare con del css inline nelle immagini 'display: none', e quindi con lo script da te costruito, (parlo dell'altro topic da te aperto) pensi di volta in volta a cambiare tale proprietà in 'inline' per l'immagine che vuoi visualizzare e 'none' per quella che vuoi nascondere.

Penso che la funzione preload di javascript faccia qualcosa del genere, cioè carica le immagini in cache, basta metterla nell'head come primo script. Ma penso che in questo caso potresti ulteriormente rallentare la visualizzazione della prima immagine, mentre con il semplice css avresti il solito caricamento lento per la prima immagine

[alitscha]

argh, sì direi che la direzione è quella che dici tu ma non sono ancora sicura di tirarne fuori qualcosa di ottimale, faccio qualche prova a mando aggiornamenti...

[alitscha]

ho visto ora gli aggiornamenti al tuo post...intendi dire che dovrei cambiare la proprietà di display da none a inline con del codice javascritp? sorry, capisco che l'idea è quella giusta ma non come dovrei realizzarla...

[alitscha]

aggiungendo solo le prime 2-3 immagini con display:none non sembra cambiare nulla

[alitscha]

speravo fosse sufficiente, ho semplicemente creato questa classe nei css
img.preload {
display: none;
}

e poi aggiunto 3 tag img con quella classe a fine della pagina html

[alitscha]

ho trovato una dritta coi jquery, con opzione di usare la stessa funzione dentro un normale javascript, se hai voglia di darci un'occhiata ecco il link

http://engineeredweb.com/blog/09/12/...and-javascript

[longilineo]

Per quanto riguarda quella funzione dell'ultimo link che mi hai postato, penso funzioni in maniera identica alla preload dell'altro link (http://www.mediacollege.com/internet...e/preload.html), il problema principale sta nel fatto che le immagini e gli altri contenuti più pesanti sono le ultime cose che vengono caricate alla richiesta http, usando il metodo in css sono sicuro che il problema non viene aggirato, non so e non penso che con il metodo spiegato nell'ultimo link riesci a risolvere, prova e facci sapere.

Non ho capito se vuoi tradurre in javascript classic (ti consiglio di passare a jquery), in caso:

var listaImg = new Array ("miaimm1.png", ...);
var cache = [];
for(i = 0; i<listaImg.length; i++){
   var cacheImage = document.createElement('img');
   cacheImage.src =listaImg[i];
   cache.push(cacheImage);
}

Ammesso che questo permetta alle immagini di essere caricate prima del resto del body, cosa di cui dubito fortemente, otteresti un ritardo nel caricamento del body, felice di sbagliarmi, le prove varrano molto più delle mie supposizioni.