Получение ширины и высоты изображения с помощью jquery

Question

У меня есть очень простой код, который досадно работал, и я не могу понять, почему он теперь дает сбой:

function imageSize(img){
  var theImage = new Image();
  theImage.src = img.attr('src');
  var imgwidth = theImage.width;
  var imgheight = theImage.height;

  alert(imgwidth+'-'+imgheight);
}

Передаваемая переменная "img" - это объект img, полученный из:

jQuery('img')
.each(function(){
    var imgsrc = jQuery(this);
    imageSize(imgsrc);
});

Answer 1

Возможно, изображение еще не загружено.Итак, попробуйте (не проверено):

function imageSize(img){
  var theImage = new Image();
  $(theImage).load(function() {
    var imgwidth = this.width;
    var imgheight = this.height;

    alert(imgwidth+'-'+imgheight);
  });
  theImage.src = img.attr('src');
}

Answer 2

Хорошо - предыдущий ответ, который я дал, был недействительным, когда я тестировал его на jsFiddle - я создал это, что делает то, что вы хотите, хотя? Вам нужна часть "new Image ()"? http://jsfiddle.net/R89Qr/3/ - дал изображениям жестко заданные размеры ...

Я немного изменил ваш код, чтобы он сделал это:

 function imageSize(img){
  var theImage = new Image(); // ignoring this part when checking the image width/height
  theImage.src = img.attr('src');
  var imgwidth = $(img).width();
  var imgheight = $(img).height();

  alert(imgwidth+'-'+imgheight);
}

$('img').each(function(){
    var imgsrc = jQuery(this);
    imageSize(imgsrc);
});

Answer 3

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

function imageSize(img){
  var theImage = new Image();
  theImage.onload = function(){
    var imgwidth = theImage.width;
    var imgheight = theImage.height;

    alert(imgwidth+'-'+imgheight);
  }
  theImage.src = img.attr('src');

}