Falla en la muestra de imagen

Desarrollo de aplicaciones basadas en tecnologías Mozilla (XBL-XUL-RDF...)
Avatar de Usuario
JackSparrow
Visitante frecuente
Visitante frecuente
Mensajes: 29
Registrado: Dom Dic 09, 2007 9:41 am

Falla en la muestra de imagen

Mensajepor JackSparrow » Jue May 08, 2008 9:36 pm

La extensión tiene una lista (tree) de URLs (de imágenes), y cada vez que el user selecciona una fila, se muestra una preview de la imagen a la que corresponde ese link, por ejemplo:
Imagen
o eso es lo que tendría que pasar =/

En la práctica, cuando selecciono por primera vez la fila no se muestra nada. Si selecciono la fila siguiente, y la siguiente, y la siguiente, tampoco se muestra nada. Pero si vuelvo a seleccionar una de las filas anteriores, la imagen aparece.

Como yo lo veo, cuando selecciono la fila la imagen se baja y guarda en el buffer en algún lado, y la segunda vez que selecciono la fila, se muestra la imagen ya bajada, aunque probé usando imágenes bien pesadas para ver qué pasaba, y me encontré con que seleccionándola una vez, seleccionando otra fila, y volviéndola a seleccionar (todo esto bien rápido),la imagen se iba mostrando mientras se cargaba, así que eso me hace dudar de lo del buffer.

No hay manera de hacer que una vez bajada la imagen se muestre sola? Probé con el onLoad, pero no funcionó. Pensé en hacer un for que pase por todas las filas iniciando las descargas de las imágenes ni bien se abre la extensión, pero no me pareció conveniente, así que abandoné esa idea.

.xul
previewImage es la id de la imagen que muestra la vista previa de los links.

Código: Seleccionar todo

<tree id="dbList" flex="1" seltype="multiple" enableColumnDrag="true"
      onselect="setText();
                resizeImage('previewImage');
                ...

.js

Código: Seleccionar todo

function setText()
{
    /* ------------------------------------------------------------------------ */
    /* ---- Actualiza la el label de la DB, el de la preview, y la Preview ---- */
    /* ------------------------------------------------------------------------ */
   
    var tree = document.getElementById('dbList');
    var selection = tree.contentView.getItemAtIndex(tree.currentIndex);
    if((selection.firstChild.hasChildNodes( )) == true)
    {   
        // Este es un textbox que no se ve en la imagen de arriba,
        // pero muestra la url de la imagen para poder seleccionarla y copiarla
        var dbText = selection.firstChild.childNodes[2].getAttribute("label");
        document.getElementById('dbText').value = dbText;
       
        // Acá se actualiza el texto que hay debajo de la imagen (dentro delgroupbox "Emoticon")
        // En la imagen de arriba es "-puppy"
        var previewText = selection.firstChild.childNodes[1].getAttribute("label");
        document.getElementById('previewText').value = previewText;

        // Y acá se prepara la imagen para mostrarla.
        var previewImage = selection.firstChild.childNodes[2].getAttribute("label");
       
        var img = new Image();
        img.src = previewImage;

        document.getElementById('previewImage').src = img.src;
    }
   
    /* ------------------------------------------------------------------------ */
    /* ------------------------------------------------------------------------ */
}

// Ya que hay algunas imágenes que pueden superar tanto en ancho como
// en alto la medida de groupbox, esta función achica la imagen de manera
// que no se deforme.
function resizeImage(previewImage)
{
    /* ------------------------------------------------------------------ */
    /* ------------------ Módulo resizeador de Preview ------------------ */
    /* ------------------------------------------------------------------ */
    var image = document.getElementById(previewImage);
    var imageSRC = image.src;
    var img = new Image();
    img.src = imageSRC;
    if(img.height > 110)
    {
        // Regla de 3 simple para resizear la imagen sin deformarla xP
        var maxHeight = 110;
        var imageScale = (100 * maxHeight)/img.height;
        var widthScale = (img.width * imageScale) / 100;
        var heightScale = maxHeight;
       
        image.style.width = widthScale+"px";
        image.style.height = heightScale+"px";
    }
    else
    {
        image.style.width = img.width+"px";
        image.style.height = img.height+"px";
    }
    /* ------------------------------------------------------------------ */
    /* ------------------------------------------------------------------ */
}


Espero que halla quedado claro.

Cualquier idea/dato que tengan será muy agradecido, porque de todos los errores/bugs que tuve desde que comencé a programar esta extensión, este es uno de los pocos que logró sobrevivir =/

Avatar de Usuario
JackSparrow
Visitante frecuente
Visitante frecuente
Mensajes: 29
Registrado: Dom Dic 09, 2007 9:41 am

Re: Falla en la muestra de imagen

Mensajepor JackSparrow » Mar May 20, 2008 7:33 pm

Ya pude hacer que la imagen aparezca sin necesidad de seleccionar otra fila y volver a la misma, pero recién aparece cuando la imagen ya está descargada.
Acá un video bien corto que muestra como a medida que las imágenes son más pesadas, tardan más en cargar (lógicamente) y por ende, tardan más en aparecer:
http://www.veoh.com/videos/v11994566kARY9tWa

Para que suceda esto modifiqué el xul de la imagen a:

Código: Seleccionar todo

<image id="previewImage"
       src="chrome://emoticonverter/skin/noImage.PNG"
       onload="resizeImage('previewImage');"

O sea, le agregué el evento onLoad, el cual llama a la función que está en el primer post:

Código: Seleccionar todo

function resizeImage(previewImage)
{
    /* ------------------------------------------------------------------ */
    /* ------------------ Módulo resizeador de Preview ------------------ */
    /* ------------------------------------------------------------------ */
    var image = document.getElementById(previewImage);
    var imageSRC = image.src;
    var img = new Image();
    img.src = imageSRC;
    if(img.height > 110)
    {
        // Regla de 3 simple para resizear la imagen sin deformarla xP
        var maxHeight = 110;
        var imageScale = (100 * maxHeight)/img.height;
        var widthScale = (img.width * imageScale) / 100;
        var heightScale = maxHeight;
       
        image.style.width = widthScale+"px";
        image.style.height = heightScale+"px";
    }
    else
    {
        image.style.width = img.width+"px";
        image.style.height = img.height+"px";
    }
    /* ------------------------------------------------------------------ */
    /* ------------------------------------------------------------------ */
}


Cuando me di cuenta de que de esta manera la imagen se actualizaba al final de la carga, pensé "si llamo a resizeImage en el medio de la carga, con un timer cada X tiempo, se debería ver el proceso de descarga de la imagen",y así evitar ese tiempo muerto mientras la imagen se descarga.
Pero no funciona. La imagen solo se muestra una vez cargada.

Ahora pregunto: Es posible ver cómo se va cargando la imagen? o sea, así como cuando en firefox abro en una pestaña una imagen pesada, la cual se va mostrando de a poco, se puede hacer lo mismo en una extensión? y si es así, como?

Espero que sepan responderme.

Saludos ;D


Volver a “Desarrollo Mozilla”

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 2 invitados