[Javascript] Precaricamento Immagini con Loading - Genymus

[Genymus]

Salve,
per caricare le immagini prima di visualizzare la pagina, ho inserito l'html in un div con id "lPage".
quando l'utente apre la pagina dovrebbe vedere una barra che aumenta ogni qualvolta finisco di scaricare le immagini presenti.
Pultroppo non riesco a far funzionare lo script.
C'è qualcuno che può aiutarmi?

Script:

...
<script>
function CaricaImmagini(i) {
var ImgPath = new Array('logos.png', 'button.png', 'frame.png');
if (i < ImgPath) {
var Img = new Image;
Img.src = ImgPath[i];
Img.onload = CaricaImmagini(i);
i = i + 1;
} else {
document.getElementById("lPage").style.visibility = "visible";
}
}

...

Ecco... sotto c'è solo html.
Cos'è che sbaglio, come funziona l'evento "Img.onload"?

[Genymus]

Ho risolto un problema in questo modo:

...
var i = 0;
var ImgPath = new Array('logos.png', 'button.png', 'frame.png');

function loadImage() {
  var Img = new Image;
  Img.src = ImgPath[i];
  Img.onload = streamImage;
}

function streamImage() {
  if (i == Imgpath.length) {
    document.getElementById("lPage").style.visibility = "visible";
  } else {
    i = i++;
    loadImage();
  }
}

Queso codice funziona con mozilla firefox ma con internet explorer no...
da quello che ho capito guardando un po' in giro, è una sintassi diversa di "Img.onload = streamImage;".
Naturalmente nessuno dei due Browser dà errori di alcun tipo.

Adesso... potete darmi indicazioni su come far funzionare il codice su entrambi i browser?

Ps: naturalmente il "loadImage" è richiamato tramite "onload" del body.
Grazie

[MEMon]

Ciao, prova così:

var imageSources = new Array('logos.png', 'button.png', 'frame.png');
var loaded=0;

function preloadAllImages(){
	var toLoad=images.length;
	for(var i=0; i<toLoad; i++){
		var img=new Image();
		img.src=imageSources[i];
		img.onload=notifyLoad;
	}
}

function notifyLoad(){
	if(loaded++ == imageSources.length){
		// caricamento completato
		document.getElementById("lPage").style.visibility = "visible";
	}
}

[Genymus]

no, ancora non funziona con internet explorer

[MEMon]

Il codice te l'avevo scritto velocemente qui senza testarlo, comunque è una svista...

var toLoad=images.length; -> var toLoad=imageSources.length;

if(loaded++ == imageSources.length){ -> if(++loaded == imageSources.length){

Ora funziona

[Genymus]

niente, però come avevi scritto tu (++i) non funziona

[MEMon]

Originariamente inviato da Genymus

niente, però come avevi scritto tu (++i) non funziona

Guarda meglio perchè ora funziona, questa volta l'ho testato .

Se hai uppato qualcosa online linka che ci do una guardata.

[Genymus]

lei aveva scritto ++loaded, ma loaded non viene incrementato in nessun passaggio dello script.
io ho messo ++i...

questo è il mio codice di adesso:

var i;
var xA = 0;
var fIi = new Array('logos.png', 'button.png', 'frame.png');
......

function loadImages() {
	var toLoad=fIi.length;
	for (i=0; i<toLoad; i++) {
		var ImgX=new Image;
		ImgX.src=fIi[i];
		ImgX.onload=streamImage;
	}
}

function streamImage() {
	if (++i == fIi.length) {
	alert("");
		NextStep();
	}

	xA = xA + 7;
	document.getElementById("lBar").style.width = xA + "px";
}

premetto che xA è la lunghezza di una barra e lo script non arriva neppure all'allert, la barra si ferma più o meno ad un quarto;
mettendo un'alert.

Mi è venuta un'ispirazione e ho cambiato la funzione streamImage() in questo modo:

function streamImage() {
alert(i);
	if (++i == fIi.length) {
		NextStep();
	}

	xA = xA + 7;
	document.getElementById("lBar").style.width = xA + "px";
}

i risultati sono stati rispettivamente 3 - 4 - 3 ...
non dovrebbe dare 0 -1 - 2 ?

Grazie

[MEMon]

Originariamente inviato da Genymus

lei aveva scritto ++loaded, ma loaded non viene incrementato in nessun passaggio dello script.
io ho messo ++i...

questo è il mio codice di adesso:

var i;
var xA = 0;
var fIi = new Array('logos.png', 'button.png', 'frame.png');
......

function loadImages() {
	var toLoad=fIi.length;
	for (i=0; i<toLoad; i++) {
		var ImgX=new Image;
		ImgX.src=fIi[i];
		ImgX.onload=streamImage;
	}
}

function streamImage() {
	if (++i == fIi.length) {
	alert("");
		NextStep();
	}

	xA = xA + 7;
	document.getElementById("lBar").style.width = xA + "px";
}

premetto che xA è la lunghezza di una barra e lo script non arriva neppure all'allert, la barra si ferma più o meno ad un quarto;
mettendo un'alert.

Mi è venuta un'ispirazione e ho cambiato la funzione streamImage() in questo modo:

function streamImage() {
alert(i);
	if (++i == fIi.length) {
		NextStep();
	}

	xA = xA + 7;
	document.getElementById("lBar").style.width = xA + "px";
}

i risultati sono stati rispettivamente 3 - 4 - 3 ...
non dovrebbe dare 0 -1 - 2 ?

Grazie

Ok facciamo un passo indietro, prova così

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento senza titolo</title>
<script type="text/javascript">
var imageSources = new Array('http://blog.episode39.it/wp-content/multimedia/2009/08/Tyra-Banks-ebony-girl-780.jpg', 'http://www.wallpaperez.net/wallpaper/beauties/Asian-girl-384.jpg', 'http://stanzedicinema.files.wordpress.com/2009/11/megan-fox-jennifers-body-2.jpg');
var loaded=0;

function preloadImage(){
	var img=new Image();
	img.src=imageSources[loaded];
	img.onload=notifyLoad;
	document.getElementById("images").appendChild(img);
}

function notifyLoad(){
	var loadPerc=(loaded++)/imageSources.length;
	document.getElementById("loading").style.width=(500*loadPerc)+"px";
	if(loaded == imageSources.length){
		// caricamento completato
		alert("CARICAMENTO COMPLETATO");
		document.getElementById("loading").style.display="none";
		document.getElementById("images").style.display="block";
	}
	else preloadImage();
}
</script>
</head>

<body onLoad="preloadImage();">
<div id="loading" style="background-color:#000; width:0px; height:5px; margin:100px auto;"></div>
<div id="images" style="display:none"></div>
</body>
</html>

Provala pari pari ora, poi la modifichi.


ps. occhio alle variabili globali, nel tuo caso la i è globale!

[MEMon]

Così però non va molto bene, perchè inizia a caricare una immagine solo dopo che quella precedente è stata caricata.
E' meglio la soluzione che ti ho proposto prima, però in quel caso potrebbe essere poco apprezzabile il caricamento di una barra, perché gli eventi vengono lanciati in asincrono.

[Genymus]

era una cavolata... tutti i codici funzionavano (tranne il primo che ho postato).
Il problema non stava nei cicli e negli eventi, ma nella dimensione delle immagini, l'ultima mia immagine era la più piccola di conseguenza la caricava immediatamente quando facevo l'src e di conseguenza l'evento non si completava e si fermava alla terza immagine.

ho risolto così:

var i = 0;
var ImgPath = new Array('logos.png', 'button.png', 'frame.png');

function loadImage() {
  var Img = new Image;
  Img.src = ImgPath[i];
  if (Img.complete == true) {
    streamImage();
  } else {
    Img.onload = streamImage;
  }
}

function streamImage() {
  i = i + 1;
  loadImage();
}

la parte in rosso è l'aggiunta che ho fatto.

Grazie Mille per l'aiuto

[MEMon]

Originariamente inviato da Genymus

era una cavolata... tutti i codici funzionavano (tranne il primo che ho postato).
Il problema non stava nei cicli e negli eventi, ma nella dimensione delle immagini, l'ultima mia immagine era la più piccola di conseguenza la caricava immediatamente quando facevo l'src e di conseguenza l'evento non si completava e si fermava alla terza immagine.

ho risolto così:

var i = 0;
var ImgPath = new Array('logos.png', 'button.png', 'frame.png');

function loadImage() {
  var Img = new Image;
  Img.src = ImgPath[i];
  if (Img.complete == true) {
    streamImage();
  } else {
    Img.onload = streamImage;
  }
}

function streamImage() {
  i = i + 1;
  loadImage();
}

la parte in rosso è l'aggiunta che ho fatto.

Grazie Mille per l'aiuto

Più che altro andava settato l'evento prima di impostare il src