JQuery width() возвращает 0

Ответ 1

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

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

Ответ 2

Вы можете предварительно загрузить изображение

var oImage = new Image();

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

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

$(document).ready не будет ждать загрузки изображений, он ожидает, что dom будет готов.

Ответ 3

Если вы вставляете доверенный html с jQuery.append() или jQuery.html() в элемент "element1", а ваше значение css для элемента2 - это div или span, плавающий влево, чтобы соответствовать элементу3, вы не сможете получить offsetWidth, clientWidth, naturalWidth (google crome) элемента 3 с новым триггером события.

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

что вы можете сделать, это вернуть ширину контекста элементов перед их загрузкой.

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 contextual width
if(chwidth != 0) // make sure only the proper width is returned 
var width = chwidth;
++i;
};

Если это не работает, попробуйте:

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

Ответ 4

Сделайте fadeIn перед чтением любых измерений:

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

Ответ 5

Интеграция доверенного HTML и получение widths без запуска нового события может быть выполнена путем доступа к его DOM-контексту после того, как доверенный HTML будет помечен document.getElementById() следующим образом:

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

Затем просто используйте массив widths, чтобы получить ширину.

Ответ 6

Я считаю, что вы можете использовать

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

Я не думаю, что .ready() является эксклюзивным для документа.

Ответ 7

К моменту вызова $(document).ready изображение должно быть уже загружено. Что-то еще не так.

Если вам нужно знать ширину изображения перед началом анимации, но при запуске анимации изображение должно быть в каком-то скрытом состоянии, вы можете захватить ширину изображения с помощью .width() перед анимацией, и вызовите .hide() или что-то еще подходящее, сразу после измерения ширины.

Ответ 8

Вы можете использовать функцию setTimeout(), чтобы задержать выполнение достаточно долго, чтобы загрузить изображение.

Вот пример того, как он работает:

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

Первый аргумент - это строка, которую ваш механизм javascript будет анализировать как исполняемый код, а второй аргумент представляет собой целочисленное значение, которое представляет количество миллисекунд, которое вы хотите задержать, прежде чем код в вашем первом аргументе будет выполнен.