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