Image preload asincrono (?)

**Nerlaleph** · 29-05-2010, 16:11

Aiuto! mi sto perdendo (credo) in un bicchier d'acqua.
In una normalissima photogallery vorrei implementare un preload delle immagini (possono essere anche 200+) che piano piano carichi le immagini in cache. Ovviamente questo non deve interrompere il flusso js e tutto deve essere attivo al caricamento delle thumbnails.
so che un banale prelodo lo posso fare così:

codice:

		var img = document.createElement('img');
		img.src = this.sanitize(aImg[i]);

quindi ho fatto:

codice:

	var aImg = this.aImages;
	var len = aImg.length;
	for(var i=0; i<len; i++) {
		var img = document.createElement('img');
		img.src = this.sanitize(aImg[i]);
	}

il problema è che con in miei numeri si freeza tutto (mi è anche crashato ff!!). quindi? che posso fare? ajax?

grazie in anticipo

**carlomarx** · 29-05-2010, 17:23

Non ho controllato se funziona e non mi fa impazzire... ma credo che con qualcosa del genere dovresti riuscirci...

codice:

	var thisObject = this;
	var aImg = thisObject.aImages;
	var len = aImg.length;
	var iImg = 0;
	var thisImg = null;
	function recursiveLoad() {
		if (thisImg) {
			thisImg.onload = null;
			thisImg.onerror = null;
		}
		thisImg = document.createElement("img");
		thisImg.src = thisObject.sanitize(aImg[iImg]);
		if (iImg < len - 1) {
			thisImg.onload = recursiveLoad; 
			thisImg.onerror = recursiveLoad;
		}
		iImg++;
	}
	recursiveLoad();

Ciao

**carlomarx** · 29-05-2010, 17:56

ok... ho fatto questo test e funziona...

codice:

<!doctype html>
<html>
<head>
<script type="text/ecmascript">
function test() {
	var aImg = ["http://forum.html.it/forum/images/smilies/smile.gif", "http://forum.html.it/forum/images/smilies/frown.gif", "http://forum.html.it/forum/images/smilies/cry.gif", "http://forum.html.it/forum/images/smilies/biggrin.gif", "http://forum.html.it/forum/images/smilies/cool.gif", "http://forum.html.it/forum/images/smilies/zizi.gif", "http://forum.html.it/forum/images/smilies/dho.gif", "http://forum.html.it/forum/images/smilies/fiore.gif", "http://forum.html.it/forum/images/smilies/confused.gif", "http://forum.html.it/forum/images/smilies/certocerto.gif", "http://forum.html.it/forum/images/smilies/rotf.gif", "http://forum.html.it/forum/images/smilies/030.gif", "http://forum.html.it/forum/images/smilies/ciao.gif", "http://forum.html.it/forum/images/smilies/jam.gif", "http://forum.html.it/forum/images/smilies/dotto.gif", "http://forum.html.it/forum/images/smilies/old.gif", "http://forum.html.it/forum/images/smilies/sbav.gif", "http://forum.html.it/forum/images/smilies/stordita.gif", "http://forum.html.it/forum/images/smilies/fagiano.gif", "http://forum.html.it/forum/images/smilies/nondirlo.gif", "http://forum.html.it/forum/images/smilies/noncisiamo.gif", "http://forum.html.it/forum/images/smilies/mame.gif", "http://forum.html.it/forum/images/smilies/ammore.gif", "http://forum.html.it/forum/images/smilies/metallica.gif", "http://forum.html.it/forum/images/smilies/electric_g.gif", "http://forum.html.it/forum/images/smilies/sonno.gif", "http://forum.html.it/forum/images/smilies/mmmm.gif", "http://forum.html.it/forum/images/smilies/sgrat.gif", "http://forum.html.it/forum/images/smilies/tupitupi.gif", "http://forum.html.it/forum/images/smilies/incupito.gif", "http://forum.html.it/forum/images/smilies/senzasperanza.gif", "http://forum.html.it/forum/images/smilies/sbonk.gif", "http://forum.html.it/forum/images/smilies/nillio.gif", "http://forum.html.it/forum/images/smilies/d56.gif", "http://forum.html.it/forum/images/smilies/ciapet.gif", "http://forum.html.it/forum/images/smilies/scalata.gif", "http://forum.html.it/forum/images/smilies/blink.gif", "http://forum.html.it/forum/images/smilies/eek.gif", "http://forum.html.it/forum/images/smilies/saggio.gif", "http://forum.html.it/forum/images/smilies/timida.gif", "http://forum.html.it/forum/images/smilies/ecco.gif", "http://forum.html.it/forum/images/smilies/sadico.gif", "http://forum.html.it/forum/images/smilies/popcorn.gif", "http://forum.html.it/forum/images/smilies/look.gif", "http://forum.html.it/forum/images/smilies/confermo.gif"];
	var len = aImg.length;
	var iImg = 0;
	var thisImg = null;
	function recursiveLoad() {
		if (thisImg) {
			thisImg.onload = null;
			thisImg.onerror = null;
		}
		thisImg = document.createElement("img");
		thisImg.src = aImg[iImg];
		document.body.appendChild(thisImg);
		if (iImg < len - 1) {
			thisImg.onload = recursiveLoad; 
			thisImg.onerror = recursiveLoad;
		} else {
			alert("Ho caricato tutte le immagini!");
		}
		iImg++;
	}
	recursiveLoad();
}
</script>
</head>
<body onload="test();">
</body>
</html>

**Nerlaleph** · 29-05-2010, 18:48

uhm ...
la funzione ricorsiva fa fondamentalmente lo stesso lavoro del ciclo (a parte il fatto che a una prima botta il tuo codice mi va in loop).
In ogni caso, a logica, non cambia nulla in quanto appena il condice entra nella funzione inizia a girare al suo interno e il dom rimane freezato ...
tieni presente che io ho almeno 2-300 immagini da ~500k l'una ... i tempi si allungano parecchio

**carlomarx** · 29-05-2010, 20:07

Non è una funzione ricorsiva vera e propria, perché non è lei a richiamare se stessa, ma delega la chiamata al caricamento (o al fallito caricamento) di ciascuna immagine. È quindi completamente diversa da un ciclo o da una funzione ricorsiva propriamente detta... e soprattutto è asincrona per quanto riguarda l'esecuzione del resto del codice js, che non attende certo che tutte le immagini siano caricate.

P.S.: io non conosco il contesto in cui la inserisci, quindi non so di preciso quali funzioni stai chiamando... e perché ti va in loop... Dovresti fare qualche aggiustamento in base al contesto. Ma il principio resta valido, perché, ripeto, non è una funzione ricorsiva... Se vuoi una definizione... è una funzione ricorsiva "triangolare" asincrona...

**carlomarx** · 29-05-2010, 20:47

Ecco cosa intendo con "asincrona" (ti conviene prima svuotare la cache per poter vedere il caricamento delle immagini in tempo reale):

codice:

<!doctype html>
<html>
<head>
<script type="text/ecmascript">
function test() {
	var aImg = ["http://forum.html.it/forum/images/smilies/smile.gif", "http://forum.html.it/forum/images/smilies/frown.gif", "http://forum.html.it/forum/images/smilies/cry.gif", "http://forum.html.it/forum/images/smilies/biggrin.gif", "http://forum.html.it/forum/images/smilies/cool.gif", "http://forum.html.it/forum/images/smilies/zizi.gif", "http://forum.html.it/forum/images/smilies/dho.gif", "http://forum.html.it/forum/images/smilies/fiore.gif", "http://forum.html.it/forum/images/smilies/confused.gif", "http://forum.html.it/forum/images/smilies/certocerto.gif", "http://forum.html.it/forum/images/smilies/rotf.gif", "http://forum.html.it/forum/images/smilies/030.gif", "http://forum.html.it/forum/images/smilies/ciao.gif", "http://forum.html.it/forum/images/smilies/jam.gif", "http://forum.html.it/forum/images/smilies/dotto.gif", "http://forum.html.it/forum/images/smilies/old.gif", "http://forum.html.it/forum/images/smilies/sbav.gif", "http://forum.html.it/forum/images/smilies/stordita.gif", "http://forum.html.it/forum/images/smilies/fagiano.gif", "http://forum.html.it/forum/images/smilies/nondirlo.gif", "http://forum.html.it/forum/images/smilies/noncisiamo.gif", "http://forum.html.it/forum/images/smilies/mame.gif", "http://forum.html.it/forum/images/smilies/ammore.gif", "http://forum.html.it/forum/images/smilies/metallica.gif", "http://forum.html.it/forum/images/smilies/electric_g.gif", "http://forum.html.it/forum/images/smilies/sonno.gif", "http://forum.html.it/forum/images/smilies/mmmm.gif", "http://forum.html.it/forum/images/smilies/sgrat.gif", "http://forum.html.it/forum/images/smilies/tupitupi.gif", "http://forum.html.it/forum/images/smilies/incupito.gif", "http://forum.html.it/forum/images/smilies/senzasperanza.gif", "http://forum.html.it/forum/images/smilies/sbonk.gif", "http://forum.html.it/forum/images/smilies/nillio.gif", "http://forum.html.it/forum/images/smilies/d56.gif", "http://forum.html.it/forum/images/smilies/ciapet.gif", "http://forum.html.it/forum/images/smilies/scalata.gif", "http://forum.html.it/forum/images/smilies/blink.gif", "http://forum.html.it/forum/images/smilies/eek.gif", "http://forum.html.it/forum/images/smilies/saggio.gif", "http://forum.html.it/forum/images/smilies/timida.gif", "http://forum.html.it/forum/images/smilies/ecco.gif", "http://forum.html.it/forum/images/smilies/sadico.gif", "http://forum.html.it/forum/images/smilies/popcorn.gif", "http://forum.html.it/forum/images/smilies/look.gif", "http://forum.html.it/forum/images/smilies/confermo.gif"];
	var len = aImg.length;
	var iImg = 0;
	var thisImg = null;
	function recursiveLoad() {
		if (thisImg) {
			thisImg.onload = null;
			thisImg.onerror = null;
		}
		thisImg = document.createElement("img");
		thisImg.src = aImg[iImg];
		document.body.appendChild(thisImg);
		if (iImg < len - 1) {
			thisImg.onload = recursiveLoad; 
			thisImg.onerror = recursiveLoad;
		}
		iImg++;
	}
	recursiveLoad();
	alert("E' partito il caricamento... ma se leggi questo messaggio prima che tutte le immagini siano caricate, e' perche' la funzione e' asincrona...! Questo messaggio di alert e' stato inserito dopo la chiamata della funzione recursiveLoad()!");
}
</script>
</head>
<body onload="test();">
</body>
</html>

**Nerlaleph** · 30-05-2010, 08:14

bè, diciamo che mi andava il loop perchè sono un pirla colossale.
Mi ero scoraggiato, ma avevi ragione te, grazie mille!!

**carlomarx** · 30-05-2010, 14:13

Figurati...

L'unica mia perplessità era che con 200 immagini, a caricarle una alla volta, anche se in automatico, ti sbrighi domattina....
Magari potresti modificare la funzione affinché il valore di ".src" venga assegnato a tre immagini per volta, o a quattro, o che so io...

Ciao

Discussione: Image preload asincrono (?)

Strumenti discussione

Ricerca discussione

Visualizza

Image preload asincrono (?)

Permessi di invio