如何阻止我的div出現幾秒鐘並消失？

我爲我工作的公司維護一個網站，就在昨天它以某種方式發展了一個我一直無法解決的問題。我已經搜索了我的屁股並找不到解決方案。問題是，我們有三個在我們頁面的底部，應該只顯示當你點擊他們的相關鏈接（三個鏈接的無序列表，每個鏈接加載一個JavaScript顯示/隱藏功能）。但從昨天開始，所有三個人的表演約2秒鐘然後消失，這是非常煩人的！除非點擊，否則他們不應該顯示。該網站是在www.successphotography.com - 看看你自己！任何幫助將不勝感激。相關代碼：如何阻止我的div出現幾秒鐘並消失？

<ul class="moreInfo"> 
<li onclick='swappy("graduation")'>Graduation Photography</li> 
<li onclick='swappy("school")'>School Photography</li> 
<li onclick='swappy("family")'>Family Photography</li> 
</ul> 
<div id="graduation"> 
<--- lots of content here ---> 
</div 
<div id="school"> 
<--- lots of content here ---> 
</div> 
<div id="family"> 
<--- lots of content here ---> 
</div>

爲swappy功能的JavaScript是：

window.onload=function(){ 

if (document.getElementById("graduation")) { 
    document.getElementById("graduation").style.display = 'none'; 
    document.getElementById("school").style.display = 'none'; 
    document.getElementById("family").style.display = 'none'; 

    } 
} 
function swappy(myself){ 
    switch(myself){ 
     case("graduation"): 
      document.getElementById("graduation").style.display = 'block'; 
      document.getElementById("school").style.display = 'none'; 
      document.getElementById("family").style.display = 'none'; 
     break; 
     case("school"): 
      document.getElementById("graduation").style.display = 'none'; 
      document.getElementById("school").style.display = 'block'; 
      document.getElementById("family").style.display = 'none';  
     break; 
     case("family"): 
      document.getElementById("graduation").style.display = 'none'; 
      document.getElementById("school").style.display = 'none'; 
      document.getElementById("family").style.display = 'block';  
     break; 
     default: 
      document.getElementById("graduation").style.display = 'none'; 
      document.getElementById("school").style.display = 'none'; 
      document.getElementById("family").style.display = 'none'; 
     break; 
    } 
}

任何幫助將非常感謝！非常感謝

來源

2012-02-01 hav

CSS中div的風格是什麼？如果你希望它們在頁面加載時不顯示，那麼在那裏設置它們爲「display：none」。 – Jivings 2012-02-01 10:15:49

這是因爲只有當window.onload事件發生時，這可能採取的過程中的一些時間，這取決於你有多少元素有你隱藏你的DIV加載頁面，延遲，渲染等。

爲了避免使用Javascript FOUC（無版內容的Flash），您應該通過CSS來隱藏#school和#family元素，但是當js未啓用時，您將無法再訪問這些div的內容。所以看看這個討論：implementing unobtrusive javascript

來源

2012-02-01 10:15:28 fcalderan

一起工作，這非常感謝討論正是我所需要的！ – hav 2012-02-01 10:29:08

這裏的指導原則是：

你應該配置/建立你的CSS和JS，使得您的前端顯示（@初始負載）正好與JavaScript的相同的啓用，沒有JavaScript。

這樣你永遠不會得到擺動搖擺加載響應。

快速修復：最初隱藏與CSS的div（顯示：無）

來源

2012-02-01 10:14:31 Monkie

我不認爲這是最好的建議。在禁用JS的情況下，您需要顯示隱藏的框。用戶可以通過啓用或禁用JS來訪問內容。通過CSS隱藏它可以消除非JS啓用用戶的這種可能性。 – 2012-02-01 10:16:21

@JamieDixon這就是'noscript'標籤的用途。 – Jivings 2012-02-01 10:20:26

比剛剛創建它們時在一個名爲exactley的js函數中使它們成爲'display：none'。這樣頁面的加載時間不會影響到onload開始並且隱藏的時間。 – khael 2012-02-01 10:22:22

既然你已經做使用jQuery的，可以考慮使用準備處理程序：

$().ready(function(){ /* code to hide elements here */})

，而不是當前的window.onload=function

這將執行你的函數當文檔準備就緒時，而不是一旦窗口已經加載，並且可能消除您目前看到的閃爍。

來源

2012-02-01 10:20:02

如何阻止我的div出現幾秒鐘並消失？

回答

相關問題