Esperar a que se cambie el src de una foto, y luego hacer algo.

[locoxchacho]

Buen dia a toda la comunidad!!

En esta ocasion, queria ver si me podian ayudar con un problema que tengo. Y es el siguiente:

http://www.prevefilms.com/intro.html

La cosa es asi: yo mediante esta funcion

Código:

 document.images["fotito"].src = "images/intro/"+ foto;

cambia el src de una foto x veces (x es el numero de fotos que tenga en un array que recorro), y luego de cambiar el src de la foto, hago un efecto de abrir y cerrar, y luego vuelvo a cambiar el src nuevamente, y asi x veces hasta la ultima, y ahi se termina la ejecucion de la funcion.

Probe haciendo un setTimeout(efecto,2000) para que le de tiempo al src de la foto a cambiar correctamente y que el efecto no se vea extraño, pero hay algunas fotos que tardan mucho en cambiarse y por ahi el efecto ya esta siendo ejecutado y recien ahi se cambia la foto, y queda mal. Quizas lo vean en sus pcs, y quizas no, pq depende de la velocidad de la pc y de la conexion a internet.

La cosa es que no puedo suponer que todos los usuarios tienen conexion ni pc buena, entonces, queria saber si hay alguna forma de hacer que, una vez que el src de la foto haya cambiado, se ejecute el efecto, asi no tendria que poner el tiempo arbitriariamente, que quizas no es el mismo para todas las fotos y en algunas no llega a cambiar.

Se entiende lo que digo???

Mi codigo es algo asi:

Código:

var fotos = ["fot1.jpg", "fot2.jpg","fot3.jpg", "fot4.jpg", "fot5.jpg", "fot6.jpg", "fot7.jpg", "fot8.jpg", "fot9.jpg", "fot10.jpg", "fot11.jpg", "fot12.jpg", "fot13.jpg", "fot14.jpg", "fot15.jpg", "fot16.jpg", "fot17.jpg", "fot18.jpg", "fot19.jpg", "fot20.jpg", "fot21.jpg", "fot22.jpg", "fot23.jpg"];
var foto_final = ["final.jpg"];
fotos.sort(function(a,b) {return 2*Math.random()-1});


function cambiar_fondo(foto){
    document.images["fotito"].src = "images/intro/"+ foto;
}
var i = 0;
 
function ciclo() {
	cambiar_fondo(fotos[i]);
	setTimeout("intro_dentro()",2000);
	setTimeout("intro_fuera()",5000)
	i++;
    if (i >= fotos.length) {
	setTimeout("cambiar_fondo(foto_final[0])",6000);
	setTimeout("intro_dentro()",7000);
	return };
    setTimeout(ciclo, 6000);
}

Desde ya, a todos los que puedan ayudarme, ya sea dando codigo, ayuda, links, o ideas, les estare muy agradecido. Un saludo y gracias por adelantado!!


Pablo.

[SergeMedina]

puedes utilizar un preload de imagenes para asegurarte que las imagenes han sido cargadas al momento de que cargue tu pagina

[locoxchacho]

y otra forma de hacer esto no habria?? Porque de esta forma, puedo pasar mucho tiempo hasta que se cargue las, por ejemplo, 20 fotos que me tengo... no hay forma de saber si ya se cargo una imagen??

Por el foro encontre que existe image.complete, pero hice esto:

Código:

var fotito = document.images["fotito"]

function ciclo() {
	cambiar_fondo(fotos[i]);
	if (fotito.complete){
	setTimeout("intro_dentro()",2000);
	setTimeout("intro_fuera()",5000);
	i++;
    if (i >= fotos.length) {
	setTimeout("cambiar_fondo(foto_final[0])",6000);
	setTimeout("intro_dentro()",7000);
	return };
    setTimeout(ciclo, 6000);}
}

Y no funciona... asique o la funcion no existe, o la estoy aplicando mal... algun comentario??



gracias!