Скрытые divs отображаются на долю секунды при загрузке страницы.

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

Моя панель навигации использует JQuery, чтобы сделать следующее:

делают выпадающие кнопки интерактивные
Скрыть и закрыть вторичную навигационную панель для хорошо .. быструю навигацию.

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

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

JQuery идет немного как это:

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

    Interactive code here. etc etc 
};

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

источник

2013-12-04 user2950370

Можете ли вы не скрывать элементы через CSS как часть HTML, а не устанавливать их через клиентский код? Это позволит удалить временную задержку между рендерингом и document.ready – freefaller

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

#example1, #example2 { 
    display: none; 
}

Вы могли бы быть в состоянии скрыть эти элементы сразу с JQuery, взяв их из ready function.

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

$(document).ready(function() { 
    ... 
});

источник

2013-12-04 15:30:18 AfromanJ

Я предлагаю использовать класс вместо отдельных селекторов (который более легко включается и выключается по мере необходимости), если на самом деле не будет только один или два на весь сайт когда-либо (отредактируйте: и они никогда не должны быть скрыты). – shubniggurath

Я согласен, я только приспособил для этой задачи. – AfromanJ

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

источник

2013-12-04 15:28:21 Moe

Используйте CSS, чтобы скрыть элементы:

display: none;

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

источник

2013-12-04 15:29:50

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

#example1, 
#example2 { 
    display: none; 
}

источник

2013-12-04 15:31:39 Poetro

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

#example1,#example2 { display: none; }

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

источник

2013-12-04 15:32:20

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

Э.Г., в моем CSS файл:

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

Тогда в вашем js просто добавьте/удалите класс «на лету» по мере необходимости.

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

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

источник

2013-12-04 15:36:40 shubniggurath

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

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

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

, а затем до вашего конца тела тега, закрыть DIV:

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

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

.js #example1 {display:none;}

источник

2013-12-04 15:38:52 Pete

Скрытые divs отображаются на долю секунды при загрузке страницы.

ответ

Смежные вопросы