Как разрешить заходить на сайт, только после того как он прогрузит данные?

Question

[ololoshka1]

Увидел на одном сайте, сначала подгружаются все данные, крутится колесо на вкладке и лишь потом заходит на сайт
https://kanbanize.com/ , я хочу так себе такое сделать, кто-то знает как?

Comments

[Дмитрий Винокуров]

У них обычная ленивая загрузка, то есть загружается бэкграунд и потом по мере загрузки данных клиентом, рендериться элемент.
Например:

if (data.button) {
    return (
          <div className={'button'}>button</div>
     )
} else return null

Answer 1

[Надим]

Очень просто, добавляете на сайт эту самую крутяшку, чтобы перекрывало весь контент, затем ждёте наступления события onload, после чего удаляйте крутяшку.

Comments

[ololoshka1]

я не про прелоадер говорил

[Надим]

ololoshka1, с телефона сижу, возможно я что-то не так понял. Позже с компа посмотрю.

[ololoshka1]

Надим Закиров, спасибо

[Надим]

ololoshka1, посмотрел указанный вами сайт с компа, там загрузчик реализован крайне просто. Изначально элемент html имеет нулевую прозрачность, но как только страница готова, прозрачность возвращается к нормальному значению и получаем эффект, будто сайт показывается только после полной прогрузки.

Если хотите себе такую же штуку, просто разместите код ниже у себя на сайте:

<style id="whp"> html { opacity: 0 !important} </style>
<script type="text/javascript">
	window.addEventListener('load', function() {
		var style = document.querySelector('#whp');
		style.parentElement.removeChild(style);
	});
</script>