Почему не определяется ширина элемента?

Question

[boga-net]

Здравствуйте. Сделал горизонтальный скролл, теперь хочу поймать ширину каждого слайда, чтобы ограничить высоту
родительского элемента, дабы на последний слайде окно не уходило дальше. Столкнулся с проблемой, что не могу получить ширину элементов - возвращает undefined или NaN. Не знаю, то ли потому, что элементы создаются динамически, то ли потому что jquery считает в пикселях, а у меня вьюпорты, то ли потому, что в CSS задано min-width: 100vw.
Значит надо узнавать ширину и высоту элементов (которые могут меняться в зависимости от размера экрана), чтобы этими значениями можно было манипулировать. В Хроме работает плохо, в мозилле лучше, но это не суть. Мне всё равно нужно понять, почему в моём случае не определяется ширина элементов. Поэтому, пожалуйста, без советов про изобретение велосипедов, iscroll и т.д.

https://codepen.io/anon/pen/wXqzbZ?editors=0010 (Внимание, подключён GSAP). Поэтому не могу воспользоваться fiddle

Есть массив изображений, из его длины создаётся соответствующее количество динамических элементов. Из массива берутся изображения, и устанавливаются в качестве бэкграунда этим созданным элементам. Им в css задаётся min-width: 100vw.
Затем я хочу для родительского элемента - в данном случае это body, задать ту же высоту, что и ширина всех слайдов. Не уверен,что этот способ самый лучший, но в качестве общего развития - почему бы и нет. Хотя, одним местом чую, что это тупо и есть другие более грамотные способы. Но вопрос - есть вопрос. Надо понять, почему не определяетяс ширина.
Таким образом я могу создать динамическую высоту для body, чтобы возможность скролла ограничивалась: ширина всех элементов в зависимости от ширины окна браузера = высота родительского контейнера. Скажем 3 элемента в общей сложности с шириной в 3000px и такая же высота body - дальше проскроллить не получится - если я правильно всё понял.

.wrapper

body
	width: 100%

.wrapper
	position: fixed
	width: 100vw
	height: 100%
	display: flex
	
	.slide
		min-width: 100vw
		height: 100%

var images = [
	//...Ссылки на картинки
];
var wrap = $('.wrapper');
var wrapWidth = wrap.width();
var slideWidth = $('.slide').width();
var allSlideWidth = slideWidth * images.length; // Вот такие значения и нужны. Но они NaN или undefined 
var slideHeight = $('.slide').height();
var allSlideHeight = slideHeight * images.length; // Вот такие значения и нужны. Но они NaN или undefined 

// Вот так я хочу задать высоту для body
$('body').css({
	// 'height': allSlideWidth + 'vh'
	'height': 100 * images.length + 'vw'
});

// Создание динамических элементов
for (let i = 0; i < images.length; i++) {
	wrap.append('<div class="slide"><p>'+ i +'</p></div>');
	$('.slide').eq(i).css({
		'background': 'url("'+ images[i] +'") no-repeat center / cover'
	});
}

$(window).on('scroll', function() {
	var scr = $(this).scrollTop();
	if (scr > wrapWidth * 7) {
		scr = wrapWidth * 7;
	}
	
	TweenLite.to('.wrapper', 2, {
		x: -scr,
		overflow: 5
	});
});

Answer 1

[Oleg Dobrygin]

Добавьте setTimeout

setTimeout(function(){
  console.log($('.slide').width())
}, 4);

Comments

[boga-net]

И что это даст ? Будут обновляться данные с интервалом 0.004 сек ?

[Emil Revencu]

Это даст время для прорисовки элементов Браузером

[Oleg Dobrygin]

boga-net, прежде чем писать комментарии, предлагаю ознакомиться с разницей между setInterval и setTimeout.

[Oleg Dobrygin]

setTimeout нужен в вашем скрипте, потому что вы прогружаете элементы после того как определяете ширину. Так что когда вы определяете ширину слайдов, их у вас в DOM еще нету, поэтому и undefined. Можно конечно определение ширины просто перенести ниже чем цикл с генерацией. А если слайды всегда должны быть по ширине окна, то забирать это все методом $(window).outerWidth();

[boga-net]

Oleg Dobrygin, Да, вы правы, прошу прощения. Это вечная путаница в голове таймаута и интервала.
И да, извините за столь поздний ответ

[NikSIk31]

Emil Revencu, Добрый день! Не могли бы вы подсказать, а стоит ли ставить больше значение для прорисовки браузером? или этого достаточно?

[Emil Revencu]

NikSIk31, больше время может оказаться лучше, так как минимальное время может не хватить браузеру для прорисовки (в зависимости от мощности девайса). Но и за большим значением тоже надо следить: может быть заметна длительная пауза в вашей логике