Хорошо, поэтому я играл с jQuery чуть больше месяца и понимаю несколько базовых понятий, но, пожалуйста, ответьте в контексте новичка!
Моя панель навигации использует jQuery для выполнения следующих действий:
Проблема: когда открывается страница, divs, которые должны быть скрыты, отображаются на долю секунды, прежде чем jQuery скрывает их.
JQuery находится во внешнем файле.js и связан в нижней части каждой страницы PHP, чуть выше закрывающего тега body.
JQuery выглядит примерно так:
$(document).ready(function () {
$(#example1).hide();
$(#example2).hide();
Interactive code here. etc etc
};
Любые идеи о том, как выполнить jQuery полностью, до загрузки страницы?
Вы должны использовать CSS, чтобы скрыть элементы:
#example1, #example2 {
display: none;
}
Вы можете сразу скрыть эти элементы с помощью JQuery, выведя их из ready function
.
$('#example1, #example2').hide();
$(document).ready(function () {
...
});
Вы можете исправить это, сокрыв определенные элементы с помощью CSS.
Используйте CSS для скрытия элементов:
display: none;
Слушатель $ (document).ready() означает, что код будет запущен после загрузки страницы.
Как уже было сказано, но я думаю, что здесь более подробно объяснено, я использую CSS, но я использую класс CSS вместо назначения его отдельным элементам/идентификаторам.
Например, в моем файле CSS:
.ninja {
display:none;
}
Затем примените этот класс к элементам, которые должны начинаться как скрытые.
Затем в вашем js просто добавьте/удалите класс "на лету" по мере необходимости.
Например, в jQuery:
$('someselector').removeClass('ninja');
Хотя здесь есть несколько ответов, все они скрывают ваши элементы через 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;}
Вы должны скрыть элементы с CSS не с .hide
. Может быть, просто сделав
#example1,
#example2 {
display: none;
}
Все $('#example2').hide()
does устанавливает CSS для display: none;
элемента display: none;
, Лучший способ предотвратить появление элементов для этой части секунды - это скрыть их в стилях CSS. Вы можете просто сделать
#example1,#example2 { display: none; }
в вашем CSS. CSS анализируется и действует быстрее JavaScript, поскольку он предназначен для того, чтобы повлиять на способ отображения вашего документа, в то время как цель JavaScript больше нацелена на манипулирование функциональностью ваших HTML-документов.