img.onload aparenta no funcionar

junihh · #1 (**permalink**) 07/03/2011, 19:59

Hola señores

Estoy haciendo una funcion tipo Lightbox, que muestre una imagen y descripcion sobre un layer oscuro. Lo hace bien, pero una variable que calcula el ancho de la imagen parece no estar calculando bien el ancho de la misma, no obstante use el evento ".onload".

Aca la funcion:

Código PHP:

  showFotos.prototype.setMsg = function (ft,ti)

{

    var ths = this;

    //

    ths.glb.box = document.createElement ('div');

    ths.glb.box.className = 'shBox';

    document.body.appendChild (ths.glb.box);

    ths.glb.box.style.display = 'none';

    //

    var fdo = document.createElement ('div');

    fdo.className = 'shBox_fdo';

    ths.glb.box.appendChild (fdo);

    //

    var cnt = document.createElement ('div');

    cnt.className = 'shBox_cnt';

    ths.glb.box.appendChild (cnt);

    //

    var img = new Image ();

    img.src = ft;

    img.onload = function ()

    {

        var fot = document.createElement ('img');

        fot.src = ft;

        cnt.appendChild (fot);

        //

        var tit = document.createElement ('p');

        tit.innerHTML = ti;

        cnt.appendChild (tit);

        //

        var fotW = fot.offsetWidth; // variable que calcula el ancho

        cnt.style.width = fotW + 'px';

        cnt.style.left = ((ths.winWH('w') - fotW) / 2) + 'px';

        //

        ths.glb.box.onmouseover = function () { this.style.cursor = 'pointer'; };

        ths.glb.box.onclick = function () { document.body.removeChild (this); };

        //

        ths.glb.box.style.display = 'block';

    };

};

Como se ve, la variable "ftW" es la que guarda el ancho del calculo, asi que no estoy seguro si estare aplicando mal el ".onload". Si quieren, pueden ver aca la muestra.

¿Tienen alguna sugerencia o idea de como solucionar este impase? Gracias por cualquier ayuda que puedan prestarme.

Panino5001 · #2 (**permalink**) 07/03/2011, 20:27

Antes de calcular el offsetWidth de la imagen hay que incluirla en el DOM. Y ojo con el evento onload aplicado de esa manera y la caché en explorer (quizá te veas obligado, para que onload se dispare siempre en ese navegador, a añadir una cadena pseudoaleatoria al atributo src).

Lo que sí obtendrás sin problemas con el evento onload es la propiedad width de la imagen.

junihh · #3 (**permalink**) 08/03/2011, 07:31

Gracias @Panino5001, pero no entiendo como incluir el "offsetWidth" en el DOM y sobre añadir una "cadena pseudoaleatoria" al src.

Me funciono usando "width" en vez de "offsetWidth". Muchas gracias viejo.

Panino5001 · #4 (**permalink**) 08/03/2011, 07:46

Te respondí de memoria en realidad, por eso lo mencionando acerca de la caché de Explorer. Me pasó una vez que cuando usaba:

Código PHP:

  var im=new Image();
im.onload=function(){alert(1);}
im.src='algo.jpg';

Al refrescar en explorer el alert no se repetía (ahora no me pasa, no sé si es cuestión de versión). En aquella ocasión tuve que emparchar así:

Código PHP:

  var im=new Image();
im.onload=function(){alert(1);}
im.src='algo.jpg?'+new Date().getTime();

A eso me refería.
Con offsetWidth me refería a que el elemento cuyo offsetWidth necesites averiguar debe previamente estar inserto en el DOM (antes de calcular el offsetWidth del elemento, éste debe haberse incluído en algun lado con appendChild)

junihh · #5 (**permalink**) 08/03/2011, 08:04

Cita:

Iniciado por Panino5001

Al refrescar en explorer el alert no se repetía (ahora no me pasa, no sé si es cuestión de versión). En aquella ocasión tuve que emparchar así:

Comentaba del tema con mi jefe y tienes razon, parece que el problema que describes sucede con IE6, pero no del 7 en adelante. De todos modos resulto bueno que lo mencionaras, por si en algun momento mas adelante necesito forzar a que la imagen se recargue.

Nuevamente gracias por tu ayuda. Un saludo.