Css загружается поздно, поэтому html выглядит странно на секунду

У меня есть общий вопрос: у меня есть веб-страница с HTML, CSS и JQuery. Когда страница начинает загружаться, она сначала загружает html и отображает divs на секунду, которые должны быть скрыты css и jquery. Но через секунду он выглядит идеально. Но эта первая секунда выглядит ужасно. Как я могу избежать этого?

Ответ 1

У меня не было такого опыта, но я думаю, что здесь нужна процедура загрузки ваших скриптов. В зависимости от того, что должна делать страница (неизвестно мне), я предпочитаю, чтобы вы загрузили этот путь.

Показать div с помощью CSS

<div style="display: none;">Hidden by default</div>

Загрузите файлы JQuery до закрытия тега тела.

Когда страница полностью загружена, она может хорошо функционировать.

Ответ 2

$(this).hide(); или $(this).addClass('.hidden'); всегда медленнее, чем .class { display:none; }

jQuery должен ждать загрузки DOM. CSS нет. Задайте свой CSS, чтобы скрыть элементы, которые нужно скрыть при загрузке, а затем используйте jQuery для отображения этих элементов.

Ответ 3

Грязное решение является встроенным css:

<div style="display: none;">This will be hidden</div>

Лучшим решением было бы построить эти элементы по требованию с помощью javascript.

Ответ 4

Если вы хотите, чтобы ваш css визуализировался быстрее, лучше всего переместить скрытые css-инструкции в свой собственный небольшой файл или, тем не менее, на самом деле добавить скрытие css в теги <style> на странице. Это будет означать, что они отображаются практически сразу.

Что касается jQuery — как упомянул Скотт — самый быстрый, на который вы можете надеяться, стреляет на dom ready. Если вы ожидаете загрузки окна, это будет еще медленнее. С помощью чистого javascript вы можете размещать теги script после элементов, которые должны быть скрыты на странице. И вы можете настроить их непосредственно с помощью doument.getElementById и установить их display на none, без необходимости ждать готовности страницы.