Аккордеон не применяется, пока не завершится загрузка страницы

Question

есть доля секунды, прежде чем страница загружается, что jquery явно не применяется, и страница выглядит точно так же, как если бы вы отключили javascript.Затем, когда страница загружается, jquery начинает работать, и аккордеон выглядит идеально.

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

У кого-нибудь есть идеи?

Answer 1

Любые элементы, которые не будут отображаться в порте представления аккордеона по умолчанию, должны иметь свойство CSS display none.

Пример:

#sampleDiv{

    display:none;
}

Это должно исправитьмерцающий взгляд при загрузке страницы.

Answer 2

То, что я сделал, было установлено display:none на div, в котором есть весь аккордеон, например:

<div id="accordion" style="display: none;">
        <h3 id="mark">
...

Затем в теге сценария

jQuery(window).load(function(){
    var accc = document.getElementById('accordion');
    accc.style.display = "";    
});

В течение половины / полной секунды вместо отображения неполного аккордеона я просто вижу пустую страницу, а затем аккордеон.

Answer 3

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

Answer 4

Это не столько ответ, сколько руководство.Аккордеоны СУПЕР легко создавать с помощью нескольких строк базового jQuery.Создание собственного Аккордеона даст вам НАМНОГО больше гибкости и гораздо меньше накладных расходов.Как вы можете видеть в моем примере, .accBody div (которые содержат вторичный контент) инициализируются как скрытые, поэтому они никогда не будут видны до тех пор, пока не будут раскрыты вручную.*http://jsfiddle.net/n55X5/

---

CSS

.accHeader{
   padding:2px; 
   background:#000; 
   color:#fff; 
   margin:2px;   
}
.accBody{
 padding:2px;
 display:none;   
}

HTML

<div class='accHeader'>Header</div>
<div class='accBody'>Body</div>

<div class='accHeader'>Header</div>
<div class='accBody'>Body</div>

jQuery

$('.accHeader').click(function(){
    $(this).next('.accBody').slideToggle('medium');
});