Как сделать, чтоб элементы страницы отображались только после загрузки?

Question

[creatoroftheworld]

Допустим, у меня много динамически создаваемых HTML-элементов на странице(через JS), загружаемых с гугла шрифтов и библиотек...
1. Как сделать так, чтоб элемент отображался на странице ТОЛЬКО после того, как он действительно "готов".
2. Можно ли как-то регулировать отображение страницы по мере её загрузки? (Загрузился ВЕСЬ header со всеми шрифтами, динамическими элементами - всё, можешь отобразиться. Прогрузился nav - всё, отобразился. И т.д.)

На счет второго, мне кажется, что можно использовать такой принцип:

<header class="hidden">
...
</header>
<script src="loadHeader"></script>
<!-- (прогрузка всех скриптов, связанных с header и удаление класса "hidden") -->

Как практически такое сделать - не нашел

Answer 1

[prodavec macdonalds]

CSS:
body {
opacity: 0;
}

jQuery:
$('document').ready(function() {
$('body').animate({
opacity: 1,
}, 500
);
});

если определенный элемент, замени body на его класс

Comments

[prodavec macdonalds]

по мере загрузки: пропиши для каждого элемента с заменой document на класс, например

CSS:
.head{
opacity: 0;
}

jQuery:
$('.head').ready(function() {
$('.head').animate({
opacity: 1,
}, 500
);
});

Answer 2

[Даниил Колесниченко]

Если я правильно понял, Вам нужно это

Answer 3

[Денис Инешин]

Может вам что-то в этом роде нужно?