閃存

2014-01-14 67 views
0
我在與手風琴的內容在頁面加載的問題

被顯示(jQuery的)閃存

下面是當前的代碼:

if (jQuery('.accordion')[0]) { 

    jQuery('.accordion').find('.acc_head').click(function (e) { 

     e.preventDefault(); 

     jQuery(this).next().slideToggle('fast').css('zoom', '1');  
     jQuery(this).parent('li').toggleClass('collapse'); 

    }); 

    jQuery('.accordion > li').each(function ($) { 

     if (!jQuery(this).hasClass('extended')) { 

     jQuery(this).find('ul').slideUp('fast').css('zoom', '1'); 
     jQuery(this).toggleClass('collapse'); 

     } 

    }); 
} 

我知道了如何運作我想基礎上展開/摺疊狀態(即圖像改變,但我得到的內容跳轉頁面加載時兩個擴大部分下面是HTML:

<ul class="dropdown accordion"> 
<li class="currentpage">Overview</li> 
<li><a href="#">Page 1</a></li> 
<li> 
    <a class="acc_head" href="#">Page 2</a> 
    <ul> 
     <li><a href="#">Sub 1</a></li> 
     <li><a href="#">Sub 2</a></li> 
     <li><a href="#">Sub 3</a></li> 
     <li><a href="#">Sub 4</a></li> 
    </ul> 
</li> 
<li><a href="#">Page 3</a></li> 
<li> 
    <a class="acc_head" href="#">Page 4</a> 
    <ul> 
     <li><a href="#">Sub 1</a></li> 
     <li><a href="#">Sub 2</a></li> 
     <li><a href="#">Sub 3</a></li> 
     <li><a href="#">Sub 4</a></li> 
    </ul> 
</li> 
<li><a href="#">Page 5</a></li> 
</ul> 

任何思考我怎麼能在加載頁面時隱藏此內容以免被顯示?

回答

2

用css隱藏它,或者內聯或者向所述元素添加類。

<li style="display: none;"> 

你不能用javascript解決它,因爲閃存是由於網頁上存在的元素和執行javascript之間的延遲而發生的。

這個被稱爲無樣式內容的閃存(FOUC)http://en.wikipedia.org/wiki/Flash_of_unstyled_content

你可以把它不太明顯,並通過移動的JavaScript出DOM已準備就緒處理程序和元素後,立即在某些瀏覽器幾乎unnoticible受到影響但是,在一些瀏覽器中,即使這樣也不夠。

您也可以將jQuery(this).find('ul').slideUp('fast')更改爲jQuery(this).find('ul').hide()