Скрытые div появляются на долю секунды при загрузке страницы

0

Хорошо, поэтому я играл с jQuery чуть больше месяца и понимаю несколько базовых понятий, но, пожалуйста, ответьте в контексте новичка!

Моя панель навигации использует jQuery для выполнения следующих действий:

  • сделать выпадающие кнопки интерактивными
  • Скрыть и закрыть дополнительную навигационную панель, а также.. быструю навигацию.

Проблема: когда открывается страница, divs, которые должны быть скрыты, отображаются на долю секунды, прежде чем jQuery скрывает их.

JQuery находится во внешнем файле.js и связан в нижней части каждой страницы PHP, чуть выше закрывающего тега body.

JQuery выглядит примерно так:

$(document).ready(function () {
    $(#example1).hide();
    $(#example2).hide();

    Interactive code here. etc etc
};

Любые идеи о том, как выполнить jQuery полностью, до загрузки страницы?

  • 0
    Разве вы не можете скрыть элементы с помощью CSS как часть HTML, а не устанавливать их с помощью клиентского кода? Это убрало бы задержку между рендерингом и документом.
Теги:

7 ответов

2
Лучший ответ

Вы должны использовать CSS, чтобы скрыть элементы:

#example1, #example2 {
    display: none;
}

Вы можете сразу скрыть эти элементы с помощью JQuery, выведя их из ready function.

$('#example1, #example2').hide();

$(document).ready(function () {
    ...
});
  • 0
    Я предлагаю использовать класс вместо отдельных селекторов (которые легче включать и выключать по мере необходимости), если только на самом деле не будет только одного или двух на всем сайте (редактировать: и они никогда не должны быть скрыты).
  • 0
    Я согласен, я только приспособлен для задачи под рукой, хотя.
2

Вы можете исправить это, сокрыв определенные элементы с помощью CSS.

2

Используйте CSS для скрытия элементов:

display: none;

Слушатель $ (document).ready() означает, что код будет запущен после загрузки страницы.

1

Как уже было сказано, но я думаю, что здесь более подробно объяснено, я использую CSS, но я использую класс CSS вместо назначения его отдельным элементам/идентификаторам.

Например, в моем файле CSS:

.ninja {
    display:none;
}

Затем примените этот класс к элементам, которые должны начинаться как скрытые.

Затем в вашем js просто добавьте/удалите класс "на лету" по мере необходимости.

Например, в jQuery:

$('someselector').removeClass('ninja');
1

Хотя здесь есть несколько ответов, все они скрывают ваши элементы через css (что вам может и не нужно, если вы хотите, чтобы элементы отображались, если js отключен)

Для этого у меня есть простое исправление - после того, как ваш <body> сделает

<script type="text/javascript">document.write('<div class="js">');</script>

а затем перед тегом конца тела закройте div:

<script type="text/javascript">document.write('</div>');</script>

Таким образом, вы можете добавлять стили к вашему css, который будет влиять только на js, пока документ загружается, и не нужно беспокоиться о том, загрузил ли dom их, прежде чем пытаться скрыть их, например:

.js #example1 {display:none;}
1

Вы должны скрыть элементы с CSS не с .hide. Может быть, просто сделав

#example1,
#example2 {
  display: none;
}
1

Все $('#example2').hide() does устанавливает CSS для display: none; элемента display: none; , Лучший способ предотвратить появление элементов для этой части секунды - это скрыть их в стилях CSS. Вы можете просто сделать

#example1,#example2 { display: none; }

в вашем CSS. CSS анализируется и действует быстрее JavaScript, поскольку он предназначен для того, чтобы повлиять на способ отображения вашего документа, в то время как цель JavaScript больше нацелена на манипулирование функциональностью ваших HTML-документов.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню