Error en javascript nueva ventana
Hola, a ver si alguien me puede echar una mano, tengo un javascript para abrir imágenes en una nueva ventana sin tener que especificar a que tamaño tiene que abrir la ventana, lo hace automáticamente, con lo cual ahorra faena. El problema que tengo es el siguiente, cuando tengo la página preparada, la subo, y compruebo si lo hace correctamente, al clickear se abre la ventana de la imagen pero en lugar de hacerlo con las dimensiones de la imagen, lo hace a pantalla completa (menos la barra de inicio, para que me entendáis) y no aparece la imagen, mirando el código fuente, la url de la imagen es correcta, pero especifica 0 en ancho y 0 en alto, :? ¿, pues bien, la cierro, vuelvo a clickear y a la segunda y sucesivas veces si que se abre perfectamente, muestra la imagen y al tamaño correcto. :? ¿? ¿? ¿, no encuentro el fallo.
El código es el siguiente:
<script language=javascript>
var win=null;
function mostrarimagen(url_imagen,titulo){
var img = new Image();
img.src = url_imagen;
win=window.open('','','width='+img.width+',height='+img.height+',scrollbars=no,resizable=1,toolbar=0');
win.document.write ('<html>\n');
win.document.write (' <head>\n');
win.document.write (' <title>'+titulo+'</title>\n');
win.document.write (' </head>\n');
win.document.write (' <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">\n');
win.document.write (' <img src="' + url_imagen + '" height='+img.height+' width='+img.width+'>\n');
win.document.write (' </body>\n');
win.document.write ('</html>\n');
}
</script>
----------------------------------------<a href="javascript:;" onclick="javascript:mostrarimagen('imagenes/cielo5.jpg','Seccion Imagenes');">
Saludotes, Juan Carlos.
El código es el siguiente:
<script language=javascript>
var win=null;
function mostrarimagen(url_imagen,titulo){
var img = new Image();
img.src = url_imagen;
win=window.open('','','width='+img.width+',height='+img.height+',scrollbars=no,resizable=1,toolbar=0');
win.document.write ('<html>\n');
win.document.write (' <head>\n');
win.document.write (' <title>'+titulo+'</title>\n');
win.document.write (' </head>\n');
win.document.write (' <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">\n');
win.document.write (' <img src="' + url_imagen + '" height='+img.height+' width='+img.width+'>\n');
win.document.write (' </body>\n');
win.document.write ('</html>\n');
}
</script>
----------------------------------------<a href="javascript:;" onclick="javascript:mostrarimagen('imagenes/cielo5.jpg','Seccion Imagenes');">
Saludotes, Juan Carlos.
1 Respuesta
Respuesta de lone101
1
Tu problema es muy común, y muy difícil de resolver. Primero te explico:
En el código cargas primero la imagen:
img.src = url_imagen;
Vale. Lo siguiente es el error: Acto seguido abres la ventana. Pero esta ventana se abre con parámetros de una imagen que todavía no se cargado. Es decir, intentas adivinar el ancho y el alto de la imagen antes de que se cargue. La segunda vez lo hace bien porque ya habrá cargado la cabecera de la imagen. Y tendrá esa información en la caché del navegador.
Solución:
Tienes que esperar a que se cargue. Te paso el código corregido:
<script language=javascript>
var titulo='';
var win=null;
var img = new Image();
function mostrarimagen(url_imagen,tit)
{
titulo=tit;
img.src = url_imagen;
img.onload=carga;
}
function carga()
{
win=window.open('','','width='+img.width+',height='+img.height+',scrollbars=no,resizable=1,toolbar=0');
win.document.write ('<html>\n'); win.document.write (' <head>\n'); win.document.write (' <title>'+titulo+'</title>\n'); win.document.write (' </head>\n'); win.document.write (' <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">\n'); win.document.write (' <img src="' + url_imagen + '" height='+img.height+' width='+img.width+'>\n'); win.document.write (' </body>\n'); win.document.write ('</html>\n');
}
</script> ----------------------------------------<a href="javascript:;" onclick="javascript:mostrarimagen('imagenes/cielo5.jpg','Seccion Imagenes');">
Esto lo he hecho de cabeza. Y no se si funcionará. Pero te dará una idea de como hay que hacerlo. Tienes que contar con que el tiempo de carga en la web, es mucho más lento que en tu disco duro.
En el código cargas primero la imagen:
img.src = url_imagen;
Vale. Lo siguiente es el error: Acto seguido abres la ventana. Pero esta ventana se abre con parámetros de una imagen que todavía no se cargado. Es decir, intentas adivinar el ancho y el alto de la imagen antes de que se cargue. La segunda vez lo hace bien porque ya habrá cargado la cabecera de la imagen. Y tendrá esa información en la caché del navegador.
Solución:
Tienes que esperar a que se cargue. Te paso el código corregido:
<script language=javascript>
var titulo='';
var win=null;
var img = new Image();
function mostrarimagen(url_imagen,tit)
{
titulo=tit;
img.src = url_imagen;
img.onload=carga;
}
function carga()
{
win=window.open('','','width='+img.width+',height='+img.height+',scrollbars=no,resizable=1,toolbar=0');
win.document.write ('<html>\n'); win.document.write (' <head>\n'); win.document.write (' <title>'+titulo+'</title>\n'); win.document.write (' </head>\n'); win.document.write (' <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">\n'); win.document.write (' <img src="' + url_imagen + '" height='+img.height+' width='+img.width+'>\n'); win.document.write (' </body>\n'); win.document.write ('</html>\n');
}
</script> ----------------------------------------<a href="javascript:;" onclick="javascript:mostrarimagen('imagenes/cielo5.jpg','Seccion Imagenes');">
Esto lo he hecho de cabeza. Y no se si funcionará. Pero te dará una idea de como hay que hacerlo. Tienes que contar con que el tiempo de carga en la web, es mucho más lento que en tu disco duro.
