JQuery width() и height() return 0 для элемента img

Итак, я создаю новый элемент изображения, как только получаю ответ от вызова AJAX с метаданными изображений следующим образом:

var loadedImageContainter = $('<div class="loaded-image-container"></div>');
var image = $('<img src="' + file.url + '" alt="">');
loadedImageContainter.append(image);
$('.loading-image').replaceWith(loadedImageContainter);
var width = image.width();
var height = image.height();
console.log(width);
console.log(height);

Но функции width() и height() возвращают 0, хотя изображение имеет размер 30 x 30 пикселей и оно отображается правильно на странице. Мне нужно получить его размеры, чтобы полностью позиционировать изображение.

Ответ 1

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

var $img = $('<img>');

$img.on('load', function(){
  console.log($(this).width());
});

$img.attr('src', file.url);

Или с простым JS:

var img = document.createElement('img');

img.onload = function(){
  console.log(this.width);
}

img.src = file.url;

Кроме того, вам не нужно вставлять изображение в DOM, прежде чем читать значения ширины и высоты, чтобы вы могли оставить свою замену .loading-image до тех пор, пока не вычислите все правильные позиции.

Ответ 2

Это потому, что ваше изображение не загружается, когда вы проверяете ширину

Попробуйте использовать событие загрузки таким образом

$('img').on('load',function(){
  // check width
});

Ответ 3

Вы также можете использовать альтернативный API $. load:

$('<img src="' + file.url + '" alt="">').load( function(){ <your function implementation> });

Ответ 4

Как сказал @ahren ранее, причина в том, что изображение не загружается, когда вы пытаетесь получить его размеры.

Если вы хотите исправить это без jQuery, вы можете использовать ванильный метод JS addEventListener:

document.getElementsByTagName('img')[0].addEventListener('load', function() {
    // ...
    var width = image.width();
    var height = image.height();
    console.log(width);
    console.log(height);
    // ...
});

Ответ 5

Если "на нагрузке" не работает, используйте это

$('<img src="myImage.jpeg">').load(function(){
   $w = $(this).width(); 
   $h = $(this).height();
   $(this).remove()
}).appendTo("body")

Ответ 6

Попробуйте следующее:

$('.loading-image').replaceWith(loadedImageContainter);
$('.loading-image').load(function(){
    var width = image.width();
    var height = image.height();
    console.log(width);
    console.log(height);
});

Ответ 7

Если вы поместите его внутри вызова AJAX, это тоже будет работать, это для метода json

$.post("URL",{someVar:someVar},function(data){

   var totalImgs = $('body').find('img').length;

   var image = $('<img src="' + data.file[0].url + '" alt="" id="IMG_'+ totalImgs +'">');

   loadedImageContainter.append(image);
   $('.loading-image').replaceWith(loadedImageContainter);

   var width = $('#IMG_'+totalImgs).width();
   var height = $('#IMG_'+totalImgs).height();

},'json');