Как сделан прелоадер сайта www.taasky.com?

Question

[Morozov_Evgeny]

www.taasky.com

Для меня важно, чтобы показывалась анимационная картинка в центре viewport. Причем его размеры заранее неизвестны. Как они центрируют GIF-ку? Как добиваются, чтобы сайт отображался строго после ПОЛНОЙ загрузки всего контента (разумеется, за исключением видео)?

Пробовал такие прелоадеры:
github.hubspot.com/pace/docs/welcome
jxnblk.github.io/loading
Оба не работают корректно - контент странички показывается во время их действия, а не после.

Answer 1

[Александр Борисович]

Все очень просто если понимать зачем спрашивать)
Все же открыто для чтения?

Есть id="loader". Есть вызов функции с его убиранием и показом основной страницы по событию "как страница загрузилась"

$(window).load(function() { 
	show();  // вызвать как страница загрузилась.
	//setTimeout(show, 2000);
});
function show() {
	$('#loader')
	.fadeOut(800, function(){ // убрали лоадер
	$('#loader-wrap')
	.fadeTo(300, 1)  // показали страницу
	});
}

www.taasky.com/js/app.js

И сам лоадер www.taasky.com/img/bg/loading.gif

Comments

[Trow_eu]

т. е. прелоадер никак не связан с скоростью загрузки страницы и даже на медленном соединении он 2 секунды помелькает и пропадет? просто картинка?
не попадалась мне необходимость в них пока, вопрос возможно наивный )

[Александр Борисович]

Он не измеряет скорость загрузки, он знает когда она завершена по событию api.jquery.com/load-event

Answer 2

[FullWipe]

Эээмм, прелоадер как бы и сделан для того что бы скрывать процесс загрузки страницы.
Или вы хотите чтобы сначала показывался прелоадер, а только потом страница грузилась?

Answer 3

[Morozov_Evgeny]

Нет, прелоадер должен показываться во время загрузки основного контента.
Логика должна быть как на сайте taasky.
Хочу к своему проекту подключить такой же прелоадер.