Узнать размеры картинки jQuery

[skillful]

Здравствуйте! Уже несколько дней бьюсь над проблемой получить размеры загруженной картинки во всех браузерах.

Код такой

var href = "картинка.jpg";

var img = new Image();
img.src = href;

var imgWidth = img.width; //длина картинки*/

alert(imgWidth);

imgWidth срабатывает когда уже картинка была загружена ранее, т.е. кэширована браузером.


С помощью функции

Img.onload = function() {
....
}

результатов не дало, перелопатил инет, различные примеры результата не дали. Надеюсь на вашу помощь...

[melky]

результатов не дало,

пример кода. должно было дать результат.

[skillful]

var href = "картинка.jpg";
var img = new Image();

var imgWidth;
img.onload = function() {	
img.src = href;
alert(this.width + 'x' + this.height); // здесь работает
imgWidth = this.width;
}

alert(imgWidth + 'x'); // здесь не работает

[melky]

img.src = href;

это надо делать не в обработчике события load.

[rafonets]

Хоть и с опозданием на 2 года, но т.к. попал на тему с поисковика, думаю будет актуально и для других, вот рабочий код (у меня):

var href = "картинка.jpg",
     imgWidth,
     img = new Image();

img.onload = function(){
  alert(img.width + 'x' + img.height); // здесь работает
  imgWidth = img.width;
}
img.src = href;

// Здесь не заработает, т.к. переменная imgWidth пустая..., она
//заполнится после загрузки картинки, а алерт сработает сразу.
alert(imgWidth + 'x'); // здесь не работает

// Делаем так:
window.onload = function(){
   alert(imgWidth + 'x'); // здесь работает
   // Вызывается после полной загрузки страницы.
   // (картинки, css, js, html и прочего) все-все...
}

[melky]

var href = "картинка.jpg",
     imgWidth,
     img = new Image();

img.onload = function(){
  alert(img.width + 'x' + img.height); // здесь работает
  imgWidth = img.width;
}
img.src = href;

// Здесь не заработает, т.к. переменная imgWidth пустая..., она
//заполнится после загрузки картинки, а алерт сработает сразу.
alert(imgWidth + 'x'); // здесь не работает

// Делаем так:
window.onload = function(){
   alert(imgWidth + 'x'); // здесь работает
   // Вызывается после полной загрузки страницы.
   // (картинки, css, js, html и прочего) все-все...
}

Прошло 2 года, а рабочий нормальный код теперь такой :

(function (global, name, def) {
  if (typeof (define) == 'function' && define['amd']) define(name, def);
   else global[name] = def();
}) (this, 'loadImage', function () {
  return function (imageSrc, done) {
    var q = new Promise(function (res, rej) {
      var img = new Image();
      img.src = imageSrc;
      img.onerror = function (e) {
        rej(e);
      };
      img.onload = function (e) {
        res(img);
      };
      if (img.complete) res(img);
    });
    return q;
  }
});

loadImage('http://upload.wikimedia.org/wikipedia/ru/8/8d/ImageComicsLogo.gif').then(function (img) {
  alert('Картинка: ' + img);
}, function (e) {
  alert('Ошибка при загрузке картинки: ' + e);
});

[рони]

на всякий случай http://caniuse.com/#search=Promise

[melky]

на всякий случай http://caniuse.com/#search=Promise

Тут нет проблемы подключить полифил
https://github.com/jakearchibald/es6-promise


жаль, что с flexbox так просто нельзя обойтись

[psfdek]

Мне кажется что так само просто. Чем некоторый огород что тут нагородили

function imgSize(href){
        var img = new Image();
        img.src = href;
        
        img.onload = function() {
            return img;
        };
        return img;
    }
        var imgZz = imgSize('http://javascript.ru/forum/images/ca_serenity/misc/logo.gif');
        alert('ширина: '+imgZz.width+';');
        alert('Высота: '+imgZz.height+';');

[ruslan_mart]

psfdek, и что это? onload асинхронно выполняется.