Foros del Web » Programando para Internet » Javascript »

Declaración de imagenes globales

Estas en el tema de Declaración de imagenes globales en el foro de Javascript en Foros del Web. Hola! Os paso una deficion muy sencilla de una imagen en JS a nivel global: <script> var v_imagen = new Image; v_imagen.src = "URL_Imagen" funcion ...
  #1 (permalink)  
Antiguo 25/01/2011, 10:37
 
Fecha de Ingreso: noviembre-2010
Mensajes: 65
Antigüedad: 14 años, 1 mes
Puntos: 0
Declaración de imagenes globales

Hola! Os paso una deficion muy sencilla de una imagen en JS a nivel global:

<script>

var v_imagen = new Image;
v_imagen.src = "URL_Imagen"

funcion fun_trata_imagenes()
{
v_imagen.onload=function() { alert('Entra'); }
}

</script>

<body onload="javascript:fun_trata_imagenes()">

Al cargar la página... No da ningún alert.

En cambio si la imagenes las defino en la función ( y no como imágenes globales ) si que va!! Es decir:

funcion fun_trata_imagenes()
{
var v_imagen = new Image;
v_imagen.src = "URL_Imagen"
v_imagen.onload=function() { alert('Entra'); }
}

Pero yo necesito estas imagenes a nivel global!! por que voy jugando con ellas en diferentes funciones de JS... Es que no puedo definir objetos de JS a nivel global con Firefox?????
  #2 (permalink)  
Antiguo 25/01/2011, 14:34
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Declaración de imagenes globales

si que se puede. ya hemos hablado sobre onload, onerror. en este caso has de usar complete
Cita:
var v_imagen = new Image();
v_imagen.src = "URL_Imagen"

funcion fun_trata_imagenes()
{
if(v_imagen.complete) alert('Entra');
}
hasta donde yo sé, onload y onerror lo puedes usar dentro de una etiqueta <img>
Cita:
<img src="imagen.gif" onload="" onerror="" />
  #3 (permalink)  
Antiguo 25/01/2011, 16:13
 
Fecha de Ingreso: noviembre-2010
Mensajes: 65
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Declaración de imagenes globales

Ok! Gracias! finalmente lo he metido todo dentro de un afunción JS. Así no hay nada a nivel global. Pero ojo, FF (y no sé si otros navegadores ) no reconoce los objetos!! Como un IMAGE, por ejemplo. Pero las variables, arrays, etc... sí que las reconoce. Así pues, las imagenes que tenia a nivel global las pongo locales en una única función. Y las variables y arrays, siguen estando a nivel global.
Ya lo dicen, hay que aprender a base de golpes!
  #4 (permalink)  
Antiguo 25/01/2011, 16:42
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Declaración de imagenes globales

he revisado la documentación del dom image complete no es aceptado por el estándar w3c. prueba ahora
Cita:
var v_imagen = new Image;
v_imagen.src = "URL_Imagen"

function fun_trata_imagenes()
{
v_imagen.onload=function() { alert('Entra');}()
}
  #5 (permalink)  
Antiguo 25/01/2011, 17:11
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Respuesta: Declaración de imagenes globales

Cita:
Iniciado por PeterTheWall Ver Mensaje
Ok! Gracias! finalmente lo he metido todo dentro de un afunción JS. Así no hay nada a nivel global. Pero ojo, FF (y no sé si otros navegadores ) no reconoce los objetos!! Como un IMAGE, por ejemplo. Pero las variables, arrays, etc... sí que las reconoce. Así pues, las imagenes que tenia a nivel global las pongo locales en una única función. Y las variables y arrays, siguen estando a nivel global.
Ya lo dicen, hay que aprender a base de golpes!
Image() se declara con esa sintaxis, tal vez no lo hayas probado con la pareja de paréntesis, pero FF sí que lo reconoce, y todos los navegadores "normales".

El tema "complete" es para tratar con pinzas. Desde luego, onload habría que programarlo antes que asignar la url al atributo src, pero me ha pasado que aún con estas precauciones, no salta el evento refrescando las páginas, así que la opción "complete" me ha resultado más eficiente.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Última edición por caricatos; 25/01/2011 a las 17:12 Razón: educación
  #6 (permalink)  
Antiguo 28/01/2011, 08:44
 
Fecha de Ingreso: noviembre-2010
Mensajes: 65
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Declaración de imagenes globales

Hola! Os cuento lo que yo he visto...

1) Sobre el tema "onload vs complete". Complete he leído que no es estandar. Y del "no estandar" a "dar problemas" hay un paso... Así que me interesé por el onload. Y me va de maravilla!! Incluso en las recargas de página. No me da problemas... Es más, le he encontrado una utilidad muy interesante, lo utilizo para vaidar si la URL de la imagen que me pasan es correcta ( Si lo es, onload lanza el proeco de inserción, si no lo es, muestro un mensaje de error a partir del evento onerror )

2) Pues yo sigo viendo que, como mínimo FF, tiene problemas con las declaraciones de imágenes a nivel global. Os muestro un ejemplo muy simple:

<html>
<head>
<script>

var v_imagen = new Image();
v_imagen.src = "http://jonlabiano.files.wordpress.com/2010/02/basket5.jpg";

function fun_inicio()
{
v_imagen.onload = function()
{
alert ("Entra");
document.getElementById("id_img").width = "100";
document.getElementById("id_img").height = "100";
document.getElementById("id_img").src = v_imagen.src;
}
}

</script>
</head>

<body onload="javascript:fun_inicio();">
<table><td><img id="id_img" src=""></td></table>
</body>

</html>

El onload del body llama a una función. Esta, carga la imagen "id_img". La imagen se obtiene de un objeto "Image" definido a nivel global. En este caso, no carga la imagen. Pero, si escribimos la declaración del objeto dentro de la función sí que va:

<html>
<head>
<script>

function fun_inicio()
{

var v_imagen = new Image();
v_imagen.src = "http://jonlabiano.files.wordpress.com/2010/02/basket5.jpg";

v_imagen.onload = function()
{
alert ("Entra");
document.getElementById("id_img").width = "100";
document.getElementById("id_img").height = "100";
document.getElementById("id_img").src = v_imagen.src;
}
}

</script>
</head>

<body onload="javascript:fun_inicio();">
<table><td><img id="id_img" src=""></td></table>
</body>

</html>

Es posible que haga algo mal ;) Pero, si no es así, el FF no me está pillando la definición global de la imagen.

Eso es lo que he visto... Perdonar tanto rollo, pero siempre que llego a alguna conclusión la comento en el foro. Ya que vosotros me dedicais tiempo, yo trato de corresponder al foro. jeje ademas... la de cosas que me habéis enseñado!! ( y las que quedan... ).

Saludos.
  #7 (permalink)  
Antiguo 29/01/2011, 02:07
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Respuesta: Declaración de imagenes globales

Hola:

Lo que pasa es que cuando programas el evento load de tu imagen, seguramente ya esté cargada..., y es justamente ese el problema del evento... además podría cargarse desde la caché, así que seguro que más adecuado sería ponerle a la url un parámetro aleatorio para que no las cargue desde la memoria...

imagen = new Image();
imagen.onload = function() {
alert('imagen cargada...');
}
imagen.src = "imagen.jpg?azar=" + Math.floor(Math.random() * 9999);

Esa secuencia es la que asegura la mayor eficacia, aunque consultar el atributo complete podría mejorarlo (aunque suene absurdo)

if (!imagen.complete) imagen.onlod = function() {
//...
}

Aunque la secuencia podría estar con el orden de asignación cambiado.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 29/01/2011, 07:40
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Declaración de imagenes globales

tomando los temas que abristes anteriormente, onload, onerror y que la definición de las imágenes sea global, creo que esto es lo que quieres
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es" xml:lang="es">
<head>
<title>Documento sin título</title>
<script type="text/javascript">
function precargar() {
var dibujos = new Array(precargar.arguments.length);
for (var i = 0; i < dibujos.length; i ++) {
dibujos[i] = new Image();
dibujos[i].src = precargar.arguments[i]
}
return dibujos;
}



function precargados(dibujos) {
for (var i = 0; i < dibujos.length; i++) {
(function(){
var contador = i;
dibujos[i].onload = function() {
document.getElementById('img'+contador).src = dibujos[contador].src;
}
dibujos[i].onerror = function() {
document.getElementById('img'+contador).src = 'error.gif';
}
})();
}
}


var imagenes;
function ini() {
imagenes = new precargar("http://jonlabiano.files.wordpress.com/2010/02/bassket.jpg?'+Math.random()+'",
"http://jonlabiano.files.wordpress.com/2010/02/basket5.jpg?'+Math.random()+'"
);
precargados(imagenes);
}
</script>
</head>
<body onload="ini()">
<div><img id="img0" src="./precarga.gif" /></div>
<div><img id="img1" src="./precarga.gif" /></div>
</body>
</html>
como ves, continuo usando parte del código de caricatos de precargas de imágenes
  #9 (permalink)  
Antiguo 29/01/2011, 08:42
 
Fecha de Ingreso: noviembre-2010
Mensajes: 65
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Declaración de imagenes globales

Vale! Muchas gracias a los dos! De hecho ya os comenté. Lo programé todo dentro de una misma función y por más que pruebo, siempre me funciona. Así que parece que el código es correcto. Lo que proponéis... jeje me huelo que voy a necesitar un buen rato para entenderlo... es que tenéis mucho nivel! Yo soy más limitadillo. Lo mio funciona correctamente, pero trataré de comprender vuestro código para intentar adaptarlo a lo que necesito ( o simpelemnte para aprender ). Pero ya os digo, ahora mismo el tema lo tengo resuelto ( glups! o eso espero ).
Muchas gracias! Sois unos fenómenos!

Etiquetas: globales, imagenes
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 12:13.