JavaScript更改div顯示：無 - 防止在javascript運行之前顯示div？

我有一個函數shoh（），它切換div的狀態 - 顯示或隱藏它。加載頁面時，通過將樣式更改爲display：none，可以爲每個div重複調用shoh（$ id）以隱藏頁面。如果用戶想要查看隱藏div中的數據，他們點擊一個帶有onClick =「show（$ id）」的鏈接，將div樣式更改爲顯示：block。這一切都很好。JavaScript更改div顯示：無 - 防止在javascript運行之前顯示div？

即使javascript被禁用，我也希望頁面可以正常工作，所以我必須將div默認爲可見，否則沒有javascript的用戶將永遠無法看到數據。問題是，當頁面加載時，所有的div都顯示爲可見，並且頁面需要在div隱藏之前完全加載。這在美觀上很差，並且會導致視覺混淆，因爲該頁面可能需要幾秒鐘才能加載。

有沒有什麼方法可以防止屏幕顯示div直到javascript有機會運行？我不介意顯示「加載...」或其他東西。提前致謝。

//toggle state of div - show OR hide - default is hidden 
function shoh(id, cmd) { 
// if cmd is not blank, clicked on button to expand all or collapse all 
cmd = typeof cmd !== 'undefined' ? cmd : ''; 
if (document.getElementById(id)){ 
    if ((document.getElementById(id).style.display == "none" || cmd=='show') && cmd!=='hide'){ 
     //show 
     document.getElementById(id).style.display = 'block'; 
     filter(("img"+id),'imgin'); 
     setCookie(window.location.pathname + ":" + id, "show", 365) 
    } else { 
     //hide 
     document.getElementById(id).style.display = 'none';   
     filter(("img"+id),'imgout'); 
     deleteCookie(window.location.pathname + ":" +id); 
    } 
} 
}

來源

2013-08-25 mseifert

使用document.write來包裝整個事情中未顯示一個div，然後顯示它在JavaScript。如果客戶端沒有JS，那麼document.write將不會被渲染，並且不需要最終的調用來顯示它。

將這個腳本內聯，而不是在標題..

<script type='text/javascript'> 
    document.write("<div id='hideWhileRendering' style='diplay: none;'>"); 
</script> 

... then rest of your divs ... 

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

然後使用一個onload功能到顯示更改爲show。如果沒有運行JS，那麼所有這些都會被忽略。如果JS運行，那麼它將在onload完成之前全部隱藏。

來源

2013-08-25 17:51:02

作品像魅力，謝謝！它使世界上的所有不同。 – mseifert

@ mseifert，太棒了！ –

認沽CSS，使DIV中<noscript>可見：

<style> 
    #hideWhileRendering { 
     display: none; 
    } 
</style> 
<noscript> 
<style> 
    #hideWhileRendering { 
     display: block; 
    } 
</style> 
</noscript>

第二個樣式塊將覆蓋第一個，但是當JS只是禁用。

來源

2013-08-25 18:21:08 Barmar

這是一個很好的選擇 - 更簡單的執行。我不知道

JavaScript更改div顯示：無 - 防止在javascript運行之前顯示div？

回答