Свойства naturalHeight(Width) равны нулю

[IlCF]

Доброго времени суток!

Я новичок, потому прошу сильно не ругать, если "дело было не в бобине"
Имеется вот такой код:

var bgimg = new Image();
bgimg.src = 'img/'+picturesNames[currentPic]+'.jpg';
imgWidth = bgimg.naturalWidth;
imgHeight = bgimg.naturalHeight;

console.log(bgimg);
console.log(imgWidth + 'x' + imgHeight);
console.log(bgimg.naturalWidth + 'x' + bgimg.naturalHeight);

После загрузки страницы в консоли наблюдается такая картина:
https://javascript.ru/forum/attachme...d=152475765 3

При этом в самом объекте, если развернуть его свойства, naturalWidth и naturalHeight не нулевые:
https://javascript.ru/forum/attachme...d=152475765 3

Если эту же страницу перезагрузить, то всё нормализуется. Если страницу не перезагружать, а загрузить другую страницу с другим picturesNames[currentPic], а потом снова перейти на предыдущую страницу, то она тоже сработает правильно.

Бьюсь второй день, изобретать "костыли" и идти в обход не хочу, т.к. хочу понять, в чём причина ошибки. Буду признателен за помощь.

P.S. Что-то не могу разобраться, как тут картинки правильно в текст вставлять, сорри.

[ruslan_mart]

Потому что на тот момент картинка ещё не загрузилась (или не взялась из кеша).

var bgimg = new Image();

bgimg.onload = function() {
   console.log(bgimg.naturalWidth + 'x' + bgimg.naturalHeight);
};

bgimg.src = 'img/'+picturesNames[currentPic]+'.jpg';

[IlCF]

ruslan_mart, спасибо огромное, понял! Никак не могу привыкнуть к тому, что в JS код выполняется не "последовательно", как в "обычных" языках. Правда, нечто подобное имеет место быть и при низкоуровневом программировании всяких железок, когда нужно учитывать задержки распространения сигнала и т.п., но там просто ждёшь и нет никаких "onload".
Ещё раз спасибо!

[j0hnik]

window.onload = function() {
    // ваш код
  };

пробовали?

[IlCF]

j0hnik,а причём тут window.onload? Да, у меня весь зависящий от загрузки страницы код в window.onload.

[Malleys]

"Последовательно" тоже можно

// Это вспомогательная функция
// запускающая переданную в неё функцию
function $(generatorFunction) {
	var iterator = generatorFunction(next);
	iterator.next();

	function next(value) {
		iterator.next(value);
	}
}
	
$(async function*(next) {
	var bgimg = new Image();
	bgimg.src = "https://placeimg.com/640/480/any";

	yield bgimg.onload = next;

	alert(bgimg.naturalWidth + '×' + bgimg.naturalHeight);
});