¿Hay un evento 'listo' disparado cuando se crea un elemento jQuery sobre la marcha?

Estoy tratando de implementar algo así como un carrusel de fotos en jQuery. Este carrusel se puede llenar con imágenes usando una variedad de fuentes de imagen (hago una solicitud ajax que devuelve un json con estos datos) y, una vez que se llena, puede llamar a un par de métodos, previous() y next() para mover el carrusel hacia adelante y hacia atrás, respectivamente.¿Hay un evento 'listo' disparado cuando se crea un elemento jQuery sobre la marcha?

El hecho es que esta funcionalidad ya está implementada y funcionando, pero no puedo resolver un problema en el proceso de cambio de tamaño. Para evitar que las imágenes excedan los límites del contenedor, tengo un método para crear y cambiar el tamaño de las imágenes, si es necesario.

this.getImageResized = function(imageSrc) { 

    var image = $('<img />', {src : imageSrc}); 

    // Container ratio 
    var ratio = this.itemMaxWidth/this.itemMaxHeight; 

    // Target image ratio is WIDER than container ratio 
    if((image[0].width/image[0].height) > ratio) { 
     if(image[0].width > this.itemMaxWidth) { 
      image.css('width', this.itemMaxWidth + 'px'); 
      image.css('height', 'auto'); 
     } 
    // HIGHER 
    } else { 
     if(image[0].height > this.itemMaxHeight) { 
      image.css('width', 'auto'); 
      image.css('height', this.itemMaxHeight + 'px'); 
     } 
    } 

    // Embeds image into a wrapper with item's width and height 
    var wrapper = $('<span style="display : block; float : left; width : ' + this.itemMaxWidth + 'px; height : ' + this.itemMaxHeight + 'px"></span>'); 

    image.appendTo(wrapper); 

    return wrapper; 
};

Al probar esta función, he encontrado que a veces las imágenes no se redimensionan como se esperaba. He usado firebug console.log() para registrar la imagen [0] .width justo debajo de la creación del elemento jQuery, descubriendo que a veces el valor es 0.

No soy un experto en jQuery, pero supongo que cuando esto sucede (el valor es 0) es porque el elemento no está listo.

¿Cómo puedo asegurar que el elemento ya está cargado cuando solicito sus valores de ancho y alto?

¿Es esto posible?

var image = $('<img />', {src : imageSrc}).ready(function() { 
    // But image[0].width it's not available here! 
});

Gracias por su ayuda!

Fuente

2010-06-22 Roberto Adarve

posible duplicado de [jQuery evento para imágenes cargadas] (http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded) – spender

@spender - Por favor, consulte mis comentarios a la respuesta de Sarfraz ... esto no es así t la misma pregunta, y esa tampoco es la respuesta adecuada, esto no debe cerrarse como duplicado ... porque, w ell, es una pregunta diferente. –

@Nick, solo puedo pensar que no detectó que Sarfaz está utilizando el evento de carga de la ventana, sin embargo, la respuesta en la pregunta vinculada utiliza el evento de carga de la imagen. Publicaré una respuesta para demostrar, pero realmente no debería ser necesario. – spender

que desea utilizar el evento load en este caso, como esto:

var image = $('<img />', {src : imageSrc}).one('load', function() { 
    // use this.width, etc 
}).each(function() { 
    if(this.complete) $(this).load(); 
});

El último bit activa el evento load en caso de que no se consiguió hacerlo ya tuvieron lugar ... lo que no ocurre en algunos navegadores al cargar la imagen desde el caché, usando .one() para disparar solo una vez y .complete para verificar si está cargada.

Fuente

2010-06-22 21:39:19

¡Muchas gracias, Nick! Esto funciona bien! –

No hay un método 'uno', debe cambiarlo a 'on' – kirugan

@kirugan Sí, hay: http://api.jquery.com/one/ No es un error tipográfico. –

No hay forma compatible plataforma para ver si un objeto DOM está "listo", ver https://developer.mozilla.org/en/DOM_Events para gecko eventos específicos

Fuente

2010-06-22 21:41:26 azatoth

De acuerdo con la respuesta proporcionada here, Eliminé juntos una demostración de trabajo:

<!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"> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    $(window).load(function(){ 
    //window load already fired 
    setTimeout(function(){ 
     var img=$('<img />'); 
     img.appendTo($("body")); 
     img.load(function(){alert("img is "+$(this).width()+"px wide.")}); 
    },5000) //5 secs delay. definitely adding "dinamically" 
     img.attr("src","http://sstatic.net/so/img/sprites.png"); 
    }); 
    //]]> 
    </script> 
</head> 
<body> 

</body> 
</html>

Fuente

2010-06-22 22:52:59 spender

Algunas cosas para solucionar aquí, esto no maneja la caja en caché (que no dispara 'load' en todos los navegadores, vea mi respuesta), simplemente debería ser' img.appendTo ("body"), 'y deberías adjuntar el controlador 'load' antes de configurar la fuente si lo haces de esta manera, de lo contrario definitivamente no disparará tu controlador de carga desde la memoria caché en * cualquier * navegador, el evento podría dispararse antes de que haya un controlador para ello. –

Se arregló el orden ... ¡Volvería a implementar su respuesta para el resto! ;) – spender

¿Hay un evento 'listo' disparado cuando se crea un elemento jQuery sobre la marcha?

Respuesta

Cuestiones relacionadas