Невозможно получить доступ к локальной переменной javascript, объявленной внутри обработчика загрузки jquery

Question

Я устанавливаю две локальные переменные внутри обработчика jQuery .load(function(){...}), но я не могу найти способ доступа к этим переменным вне обработчика. Я попытался удалить объявление var, но это не сработало. Сейчас я пытаюсь использовать return, но я не могу заставить его работать. Вместо оповещения о числовом значении Firefox оповещает «[object HTMLImageElement]», когда я запускаю код.

* Я могу убедиться, что alert(x) работает, когда помещается в обработчик / функцию.

Код ниже представляет собой модификацию решения Хави для считывания фактических размеров изображения.

var imagepopXY = $("<img/>").attr('src', imagepopSrc).load( function() {
    var x = this.width;
    var y = this.height;
    return [x,y]
});

alert (imagepopXY[0]);

Answer 1

imagepopXY содержит изображение, а не функцию!

Так что нельзя так это называть.

Если вы хотите определить глобальные переменные, определите их перед функцией:

var x; var y;

var imagepopXY = $("<img/>").attr('src', imagepopSrc).load( function() {
    x = this.width;
    y = this.height;
});

но это не очень хороший код!

Answer 2

imagepopXY будет содержать изображение, как уже указывал Джером. Большая проблема в том, что даже в решении Mrchief предупреждение не покажет вам эти значения. Зачем? Поскольку событие загрузки срабатывает, когда изображение действительно загружается, и в большинстве случаев это, вероятно, происходит после срабатывания оповещения (поскольку вы присваиваете эти значения в событии, остальная часть кода продолжает пускаться в движение, не обращая на это внимания).

Если вашему приложению требуются значения x и y, прежде чем оно сможет продолжаться, тогда было бы лучше просто поместить вызов функции в событие загрузки. Как это:

$("<img/>").attr('src', imagepopSrc).load(function() {
  keepWorkingWithTheImage(this.width, this.height);
});

var keepWorkingWithTheImage = function(x, y) {
 // your code is here
 alert(x);
 alert(y);
};

Answer 3

Попробуй так:

var imagepopXY = {};

$("<img/>").attr('src', imagepopSrc).load( function() {
    imagepopXY.x = this.width;
    imagepopXY.y = this.height;

});

alert ('X: ' + imagepopXY.x + ' Y: ' + imagepopXY.y);