Comportamiento extraño Tratamiento de Imagenes

[jjruiz52x]

Estoy trabajando con una galería de imágenes y para calcular la relacion de aspecto de los Thumb estoy utilizando este codigo

Código:

	
                       var img = document.createElement('img'); //Creo el objeto que insertare en el documento
			img.src = this.getUrlFromId(key,i,true); //Funcion que obtiene la url de la imagen
			
			/// Calcular dimensiones
			foto_calcula = new Image();
			foto_calcula.src = this.getUrlFromId(key,i,true);
			alert(foto_calcula.src);  ////Linea Problematica
			ancho_original = foto_calcula.width;
			alto_original = foto_calcula.height;
			relacion = alto_original / 100;
			nuevo_ancho = ancho_original / relacion;
			/// FIN CALCULOS
			
			
			img.width = nuevo_ancho;
			img.height = 100;

			//attach the image to the div
			div.append(img);

El problema con la linea marcada... es que si la quito el codigo deja de funcionar y cuando por ejemplo hago un alert del width del objeto foto_calcula no existe, es "Undefined" Entonces no se cual es el problema... todo funciona bien... pero si quito el alert(urlimagen) deja de funcionar

Ayuda?? o errores??

[David]

¿Qué código tiene el método getUrlFromId()?

[jjruiz52x]

El codigo que tiene esa funcion es este:

Código:

getUrlFromId: function(key,id,isThumb){

		//do we have this url in our bucket?
		if(this.bucket[key] != null && this.bucket[key][id] != null){
			if(isThumb && this.bucket[key][id]['thumb'] != null){
				return this.baseURL+this.bucket[key][id]['thumb'];
			} else if (!isThumb && this.bucket[key][id]['main'] != null){
			return this.baseURL+this.bucket[key][id]['main'];
			}
		}

		//we don't have it stored, so generate it
		if(isThumb)
			return this.baseURL+this.thumbURL.replace('{ID}',id);
		return this.baseURL+this.mainURL.replace('{ID}',id);
	},

Sin embargo este funciona bien... de hecho el metodo que puse en el post anterior para sacar los anchos y altos de la imagen es lo que me hace que no funcione bien sin el alert... pero esta funcion siempre ha funcionado bien...


y Corrigo el codigo del primer post... esta correcto,... solo que el rojo resalta una parte que si funciona bien... solo es el alert el que al quitarlo deja de funcionar todo...

Código:

var img = document.createElement('img'); //Creo el objeto que insertare en el documento
			img.src = this.getUrlFromId(key,i,true); //Funcion que obtiene la url de la imagen
			
			/// Calcular dimensiones
			foto_calcula = new Image();
			foto_calcula.src = this.getUrlFromId(key,i,true);
			alert(foto_calcula.src);  ////Linea Problematica
			ancho_original = foto_calcula.width;
			alto_original = foto_calcula.height;
			relacion = alto_original / 100;
			nuevo_ancho = ancho_original / relacion;
			/// FIN CALCULOS
			
			
			img.width = nuevo_ancho;
			img.height = 100;

			//attach the image to the div
			div.append(img);

[zerokilled]

claro, es normal... sucede que la imagen tiene que cargar primero -no recuerdo si completamente o al menos una gran parte del encabezado de archivos- antes de obtener sus propiedades. cuando el alert esta presente, el navegador continua cargando la imagen en la cache. ya para cuando cierres el aviso, la imagen seguramente ha terminado de cargar. sin el aviso, todo sucede muy a prisa y por eso no puedes leer las propiedades.

[jjruiz52x]

ohhh!!! interesante.... Tiene logica tu explicación... y tienes razon!

Ahora el desafio es como hacer que funcione para lo que lo necesito!


Gracias!

[zerokilled]

en javascript no hay forma de detener una operacion por un determinado tiempo y luego continuar. lo que si existe es establecer un trascurso de tiempo para realizar una operacion. es una forma de hacerlo pero opino que hay mejores soluciones. en este caso, la funcion Image devuelve un elemento <img>. estos elementos tienen el evento onload el cual responde cuando la imagen termina de cargar. simplemente creas el evento onload y dentro de este realizas las operaciones necesarias tales como calcular el ancho y agregarlo al documento.