Как проверить загружена ли определенная секция?

Question

[Дмитрий Локшин]

Добрый день, друзья!

Как можно проверить загружен ли определенный блок/секция, и если загружена, то выполнить определенные действия.
Например, вывожу прелоадер на сайт, но т.к. там много всего, это занимает очень много времени загрузки и прелоадер видится еще долго (бывает секунд 10-15). Оптимизировано все по максимуму, т.к. PageSpeed выдает 100% (все минифицированно, объединено в один файл, картинки сжаты, спрайты, критический css и т.д.).

Если отключить прелоадер, то видна проблема в первом экране: хоть из-за инлайново встроенного критического css все загружается очень быстро, но там еще работает скрипт (просто маленькая функция в 5 строк), который подстраивает header под высоту экрана, из-за этого происходит скачок.

На данный момент прелоадер загружается после загрузки всего документа:

$(window).on('load', function () {
	$preloader = $('.preloader'),
	$preloader.fadeOut();
	$preloader.delay(350).fadeOut('slow');
});

может есть какой-то лучше способ, либо можно как-то убрать прелоадер после загрузки именно первого экрана?

Спасибо!

Comments

[vaskadogana]

если это какой нибудь ленд, то как вариант вставлять содержимое после загрузки.
document.body.onload = function(){
.append(остальная часть страницы)...
}
А лучше нормальный css написать, чтобы не делать костылей.

Answer 1

[Stalker_RED]

Что вы понимаете под выражением "загружен блок"?
Вы можете отследить когда загружен весь html, или весь html, стили и ресурсы (картинки).

Эта подстройка высот настолько важна, что ради нее вы ввели прелоадер? Может как-то переделать ее на css, или убрать вообще, или пусть сперва страница так и отрисовывается, а потом плавно, без скачка анимируется высота.