Foros del Web » Programando para Internet » Javascript »

Comportamiento extraño Tratamiento de Imagenes

Estas en el tema de Comportamiento extraño Tratamiento de Imagenes en el foro de Javascript en Foros del Web. 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 = ...
  #1 (permalink)  
Antiguo 17/09/2010, 13:14
 
Fecha de Ingreso: febrero-2010
Mensajes: 6
Antigüedad: 12 años, 4 meses
Puntos: 0
Comportamiento extraño Tratamiento de Imagenes

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??
  #2 (permalink)  
Antiguo 17/09/2010, 13:18
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 17 años, 2 meses
Puntos: 839
Respuesta: Comportamiento extraño Tratamiento de Imagenes

¿Qué código tiene el método getUrlFromId()?
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 17/09/2010, 14:14
 
Fecha de Ingreso: febrero-2010
Mensajes: 6
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Comportamiento extraño Tratamiento de Imagenes

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);

Última edición por jjruiz52x; 17/09/2010 a las 14:18 Razón: Error en el primer POST al resaltar las lineas con error!
  #4 (permalink)  
Antiguo 17/09/2010, 14:25
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 13 años, 2 meses
Puntos: 1485
Respuesta: Comportamiento extraño Tratamiento de Imagenes

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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #5 (permalink)  
Antiguo 17/09/2010, 14:26
 
Fecha de Ingreso: febrero-2010
Mensajes: 6
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Comportamiento extraño Tratamiento de Imagenes

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

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


Gracias!
  #6 (permalink)  
Antiguo 17/09/2010, 14:33
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 13 años, 2 meses
Puntos: 1485
Respuesta: Comportamiento extraño Tratamiento de Imagenes

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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Etiquetas: extraño, imagenes, tratamiento
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:56.