ancho de jQuery() devuelve 0

Question

Duplicar posible:
Official way to ask jQuery wait for all images to load before executing something

Estoy escribiendo un plugin de jQuery que maneja un montón de animaciones de imágenes con una simple llamada a la función de plug-in (algo así como $("#image1").anims() donde #image1 es una imagen), sin embargo, como parte de la funcionalidad del complemento utilizo $(this).width() para obtener el ancho de la imagen justo al comienzo de la llamada a la función.

Pero, como se llama a la función de complemento en $(document).ready, está tratando de obtener el ancho de la imagen antes de que la imagen se cargue, por lo que siempre devuelve 0. ¿Hay alguna solución para esto?

Answer 1

Puede utilizar la función setTimeout() para retrasar la ejecución el tiempo suficiente para que se cargue la imagen.

Aquí es un ejemplo de cómo funciona:

setTimeout("alert('hello world');", 5000); 

El primer argumento es una cadena que su motor JavaScript analizará como la ejecución de código y el segundo argumento es un valor entero que representa el número de milisegundos que desea retrasar antes de que se ejecute el código en su primer argumento.

Answer 2

Creo que se puede utilizar

$(this).ready(function() { 
    // stuff with $(this).width() in here 
}) 

No creo ready() es exclusiva para el documento.

Answer 3

En el momento en que se invoca $(document).ready, la imagen ya debería haberse cargado. Algo más está mal.

Si necesita conocer el ancho de la imagen antes de comenzar la animación, pero la imagen debe estar en algún estado oculto cuando comienza la animación, puede capturar el ancho de la imagen usando .width() antes de la animación, y llame al .hide() o lo que sea apropiado, inmediatamente después de medir el ancho.

Answer 4

Se puede cargar previamente la imagen

var oImage = new Image(); 

oImage.onload = function(){ 
    this.width// width of loaded image 
} 

oImage.src = '/path/to/image.gif'; 

$ (document) ready no va a esperar a que las imágenes se carguen, espera a que el DOM esté listo.

Answer 5

http://docs.jquery.com/Events/load

$("#image1").load(function() { 
$("#image1").anims(); 
}); 

Answer 6

Hacer un fadeIn antes de leer cualquier dimensión:

$('#image').fadeIn(10,function() { 
    var tmpW = $(this).width(); 
    var tmpH = $(this).height(); 
}); 

Answer 7

Si está interponiendo html confianza con jQuery.append() o jQuery.html() en "element1" y su valor css de element2 ya sea que div o span estén flotando a la izquierda para ajustarse a element3, no podrá obtener offsetWidth, clientWidth, naturalWidth (google crome) de element3 sin un nuevo evento desencadenante.

var element1 = $('div.container'); 
while(i<=length){ 
var element2 = $('<span/>').attr({'id':''+[i]+'','class':'container'}); 
var element3 = $('<img/>').attr('src':''+source[i]+'','class':'img'); 
$(element1)children().remove(); 
$(element2).appendTo(element1).append(element3); 
var elms = $(element3); 
var chwidth = elms[i].offsetWidth // returns 0; 
++i; 
}; 

Lo que puede hacer es devolver el ancho del contexto de los elementos antes de que se carguen.

while(i<=length){ 
$(element1).children().remove(); 
$(elemen2).appendTo(element1).append(element3); 
var elms = $(element3); 
var newelms = elms[i].load(); 
var chwidth = newelms[i]['context'].width // returns element3's contextual width 
if(chwidth != 0) // make sure only the proper width is returned 
var width = chwidth; 
++i; 
}; 

Si esto no funciona, entonces intente:

while(i<=length){ 
$(element1).children().remove(); 
$(elemen2).appendTo(element1).append(element3); 
var elms = $(element3); 
var newelms = elms[i].load(function(){ 
//get the widths inside the load context 
var width = this.width(); 
//pass the single width or el[i].width to next function 
}; 
++i; 
}; 

Answer 8

interjecting HTML confianza y conseguir el widths sin desencadenar un nuevo evento se puede realizar accediendo a su contexto DOM después de que el HTML de confianza se interrumpió con document.getElementById() así:

var element1 = $('element#one'); 
var element1id = element1.attr('id'); 
var newElement1 = document.getElementById(''+element1id+''); 
var newElement2 = newElement1.children; 
var widths = []; 
for (var i = 0; i < newElement2.length; ++i) { 
    var img = newElement2[i].children; 
    widths[i] = img[0].width; 
} 

Entonces sólo tiene que utilizar la matriz widths para obtener los anchos.