Precarga de imágenes dentro de una función Ajax

[xenon254]

Hola a todos,

He dado bastantes vueltas a estas líneas para que me realice una operativa que a priori debería ser bastante simple pero no lo he conseguido realizar.

1. Solicita a un fichero llamado auth.inc.php que realice unas validaciones de usuario y cree unas variables de sesión, (funciona OK). También que lea un directorio de imágenes para que devuelva una cadena con los nombres (imagen1.jpg,imagen2.jpg,imagen3.jpg,...). También funciona OK.

2. Si el fichero php no devuelve mensaje de error divide la cadena recibida usando de separador una coma (,) y guarda los resultados en el array 'imagenes'.

3. Realiza la operativa de la precarga recorriendo todas las imágenes.

4. Al final y conociendo por experiencia que se han descargado todas las imágenes se envía ese array a la función testLoaded() para que lo vuelva a recorrer.

5. Si encuentra una imagen no cargada vuelve a llamar a la función con un setTimeOut a los 10milisegundos.

6. De esta manera recursiva, en teoría, debería estar realizada la carga de todos los ficheros para luego proceder finalmente a dirigirse a otra página.

---------

Pues bien, no funciona. Me pienso que no es capaz de interpretar el setTimeOut y que no lo hace..

Agradezco mucho cualquier indicación que se me haga.

Código:

function nuevoAjax(){
	var xmlhttp = false;
	try{
	  xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
	} 
	catch(e){
		try{
			xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
		}
		catch(E){
			xmlhttp = false;
		}
	}
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') 
		xmlhttp = new XMLHttpRequest();
	return xmlhttp;
}

function testLoaded(imgs){
	var i;
	for(i in imgs)
		if (!imgs[i].complete)
			setTimeout('testLoaded('+imgs+')', 10);
	window.location.replace('inicio.html');
}

function auth(){
	var f = document.formulario;
	c = document.getElementById('status');
	
	user=f.user.value;
	pass=hex_sha1(f.pass.value);
	
	ajax=nuevoAjax();
	c.innerHTML = 'Validando...
	ajax.open("POST", "includes/auth.inc.php",true);
	ajax.onreadystatechange=function(){
		if (ajax.readyState==4)
		    if (ajax.status==200){
				if (ajax.responseText == 'Err 1')
					c.innerHTML = 'Login y/o Pass incorrectos.';
				else if (ajax.responseText == 'Err 2')
					c.innerHTML = 'Se ha producido un error';
				else{
					c.innerHTML = 'Cargando inteface';
					var imagenes = ajax.responseText.split(",");
					var i;
					var lista_imagenes = new Array();
			
					for(i in imagenes){
						lista_imagenes[i] = new Image();
						lista_imagenes[i].src = 'images/'+imagenes[i];
					}
					testLoaded(lista_imagenes);
				}
			}
	}
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	ajax.send("user="+user+"&pass="+pass);
}

[caricatos]

Hola:

Siendo un array, deberías pasarlo como tal, o sea poner un juego de corchetes, y si son valores string ponerlos con un join que inserte una coma entrecomillada...

setTimeout('testLoaded('["+imgs.join('","') +'"])', 10);

Saludos

[xenon254]

Muy buenas Caricatos

Gracias por atender mis dudas.
Puesto que que 'imgs' es un array he probado con:

Código:

setTimeout('testLoaded(['+imgs+'])', 10);

Pero tres cuartos de lo mismo.

Un saludo

[caricatos]

Hola:

Creo que lo que puse no tenía errores (aunque lo hice "a Capella")...

¿Lo has probado?

Saludos

[caricatos]

Ups!

Estoy viendo que no es un array de cadenas sino de objetos "Image()"así que la estrategia debe ser otra... La más fácil de implementar en mi opinión es que no pongas parámetros y el array sea global...

Saludos

[xenon254]

Muy buenas

Gracias de nuevo. Parece que hemos avanzado pero no logrado el éxito.

Te indico las nuevas líneas que tengo:

Código:

function nuevoAjax(){
	var xmlhttp = false;
	try{
	  xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
	} 
	catch(e){
		try{
			xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
		}
		catch(E){
			xmlhttp = false;
		}
	}
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') 
		xmlhttp = new XMLHttpRequest();
	return xmlhttp;
}

var lista_imagenes = new Array();

function testLoaded(imgs){
	var i;
	var incompleto = 0;
	var ruta;
	for(i in lista_imagenes)
		ruta = lista_imagenes[i].src;
		document.formulario.user.value = ruta.substring(28,ruta.length)+' > '+i;
		if (!lista_imagenes[i].complete){
			incompleto = 1;
    			setTimeout('testLoaded()', 300);
                }

	if (incompleto ==0){
		window.location.replace('inicio.html');
	}
}

function auth(){
	var f = document.formulario;
	c = document.getElementById('status');
	
	user=f.user.value;
	pass=hex_sha1(f.pass.value);
	
	ajax=nuevoAjax();
	c.innerHTML = 'Validando...
	ajax.open("POST", "includes/auth.inc.php",true);
	ajax.onreadystatechange=function(){
		if (ajax.readyState==4)
		    if (ajax.status==200){
				if (ajax.responseText == 'Err 1')
					c.innerHTML = 'Login y/o Pass incorrectos.';
				else if (ajax.responseText == 'Err 2')
					c.innerHTML = 'Se ha producido un error';
				else{
					c.innerHTML = 'Cargando inteface';
					var imagenes = ajax.responseText.split(",");
					var i;
			
					for(i in imagenes){
						lista_imagenes[i] = new Image();
						lista_imagenes[i].src = 'images/'+imagenes[i];
					}
					testLoaded();
				}
			}
	}
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	ajax.send("user="+user+"&pass="+pass);
}

- He cambiado el lugar de declaración del array de las imágenes.
- Añadí un pequeño control para ir mostrando en una casilla del formulario las imágenes que van siendo analizadas.
- He subido el tiempo del setTmeout por si era el motivo que ahora explico.

En Firefox va mostrando progresivamente las imágenes en la casilla del formulario. Realiza como dos pausas y en el título del programa me marca "No responde", a la tercera pausa se queda colgado. No siempre indicando el mismo archivo.

Dejo claro que el array no hay elementos tipo ".", "..", ".ico" ni "html" que puedan entorpecer al código en su carga.

En Iexplorer no deja mostrar los archivos que pasan a ser indicados por el input text pero acaba colgándose tanto que me toca reiniciar el router...


¿Alguna nueva idea?. Mil gracias.

[xenon254]

Vaya, parece que después de bastantes intentos parece que he conseguido avanzar hasta el fín. Y digo parece porque aunque lo he probado con IE, FF y GC y ni se cuelgan y parece que está todo OK falta testear y dejar ver como sucenden en diferentes situaciones.

Os indico el código únicamente de la funcion testLoaded() por si a alguien le sirve para algo:

Código:

function testLoaded(){
	var i;
	var fin=1;
	for(i in lista_imagenes){
		if (lista_imagenes[i].complete)
			lista_imagenes.splice(i,1); 
		else
			fin=0;
	}
	if (fin)
		window.location.replace('inicio.html');
	else
		setTimeout('testLoaded()', 100);
}

Un saludo.