javascript - set width jquery

jQuery width() devuelve 0

Question

Posible duplicado:
Manera oficial de pedir a jQuery que espere a que todas las imágenes se carguen antes de ejecutar algo

Estoy escribiendo un complemento de jQuery que maneja un montón de animaciones de imagen con una simple llamada a la función del complemento (algo así como $("#image1").anims() donde #image1 es una imagen), sin embargo, como parte del complemento Funcionalidad Utilizo $(this).width() para obtener el ancho de la imagen justo al inicio de la llamada a la función.

Pero, dado que la función de complemento se llama en $(document).ready , está intentando obtener el ancho de la imagen antes de que la imagen se haya cargado, por lo que siempre está devolviendo 0. ¿Existe alguna solución para esto?

Answer 1

Creo que puedes usar

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

No creo que .ready () sea exclusivo del documento.

Answer 2

Cuando se llama a $(document).ready , la imagen ya debería estar cargada. Algo más está mal.

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

Answer 3

Haz un fadein antes de leer cualquier dimensión:

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

Answer 4

Podría usar una función setTimeout() para retrasar la ejecución el tiempo suficiente para que la imagen se cargue.

Aquí hay un ejemplo de cómo funciona:

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

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

Answer 5

Podrías precargar la imagen.

var oImage = new Image();

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

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

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

Answer 6

Se puede interponer el HTML de confianza y obtener los widths sin desencadenar un nuevo evento accediendo a su contexto DOM después de que el HTML de confianza se haya inyectado con document.getElementById() forma:

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;
}

Luego solo usa la matriz de widths para obtener los anchos.

Answer 7

Si está interponiendo html de confianza con jQuery.append () o jQuery.html () en "element1" y su valor css de element2, ya sea div o span, se desplaza hacia la izquierda para ajustar element3, no podrá obtener offsetWidth, clientWidth, naturalWidth (google crome) de element3 sin un nuevo activador de eventos.

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 de 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, 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

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

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