JavaScript: как получить для вывода в коде размеры изображения?

Question

[Shimpanze]

Добрый день!

Необходимо сконфигурировать и вернуть тег <img src="..." width="..." height="..." />.

Делаю так:

// создаю объект
var img = new Image();

// как только изображение загружено, можно прочитать его ширину и высоту
img.onload = function() {
    var width  = this.width,
        height = this.height;
};

img.src = url;

Вопрос: как мне вот здесь (за пределами этой функции img.onload = function() {...}), дождаться когда изображение точно загружено и точно получены его размеры и ТОЛЬКО ТОГДА сконфигурировать и вернуть тег <img />?

return '<img width="' + ??? width ??? + '" height="' + ??? height ??? + '" src="' + url + '"';

Что бы я не делал, получаю или «undefined» или «0». Видимо return, срабатывает быстрее чем изображение загружается.

Буду благодарен за помощь.

Comments

[Александр]

Для чего жестко прописывать ширину и высоту изображения?

Answer 1

[Stalker_RED]

как мне вот здесь (за пределами этой функции img.onload = function() {...}), дождаться когда изображение точно загружено

Но... ведь... событие load специально сделано для того, чтобы показать когда изображение загружено. Вы хотите чего-то странного.

Comments

[Shimpanze]

Друг, если знаешь, напиши как мне проставить эти ^$!@# размеры в return, второй день не сплю.

[Stalker_RED]

Shimpanze, вы ведь понимаете, что загрузка изображения идет асинхронно, или это нужно объяснять?

Какой еще return?

[Shimpanze]

Это обработка голого текста, в котором есть только ссылки на изображения. Я циклом вытаскиваю эти самые ссылки и мне необходимо сконфигурировать вместо них элемент <img />. Но потом-то, этот надо вернуть на место. Правильно? Отсюда и return.

[Shimpanze]

Написал код подробно в комментарии выше (для «Hocopor»).

[Stalker_RED]

Shimpanze, вы почему-то упираетесь в вопрос "где?" (за пределами функции бла-бла-бла). В то время как правильно было бы решать вопрос "когда?". Размеры будут доступны ТОЛЬКО ПОСЛЕ того, как изображение загрузится. До этого вы в любом месте будете получать undefined или ошибку.

Метод onload специально сделан так, чтобы запускался ПОСЛЕ загрузки.