從javascript文件加載css時，我應該如何保持html輸出隱藏，直到加載css文件？

當javascript創建了包含我所有輸出的父div時，我用element.style.display = 'none'隱藏了它。出於性能考慮，我認爲讓我的插件（JavaScript）在開始時加載css文件是最快的方法。然後，一旦加載，css將使父div再次可見。但是，如果在創建div之前加載css文件，當代碼到達該點時，JavaScript是否仍然隱藏它？在這裏使用！重要的標籤看起來便宜。另外，創建div後加載css文件只是意味着輸出將花費更長時間才能顯示給用戶。我想知道是否有一個標準的解決方案，但一直沒有找到。謝謝！從javascript文件加載css時，我應該如何保持html輸出隱藏，直到加載css文件？

來源

2013-01-14 m59

你是什麼意思「使用的一個重要標籤這裏似乎便宜！」多久你期待它 –

採取下載CSS？這似乎有點過度設計給我。 –

我同意。這似乎是不成熟的優化。 –

<style> 
    body { display: none; } 
</style> 
<script> 
    window.onload = function(){ document.body.style.display = null; } 
</script>

您可能會檢查CSS鏈接ref是否已加載，這是更高級別的，但我推薦David Flanagan編寫的JavaScript書籍。

更好的方法是使用純CSS - 它會自動發生並且不會等待文檔加載。

<style> 
    body { display: none; } 
</style> 
<link rel="stylesheet" href="some.css">

在some.css文件：

body { display: inherit; }

不確定inherit，也許block會工作。嘗試。

來源

2013-01-14 20:39:19

我總是使用'block'，並且從來沒有任何問題。也許'繼承'將不起作用，因爲身體沒有父母？它是頂級元素。 – 11684

當您創建包裝DIV時，give是一個類名稱類似「hideMe」的類名，並將hideMe定義爲display:none。當你想顯示它時，刪除該類（或重新定義它）。

來源

2013-01-14 20:36:36

你可以使用jQuery和與解決這個問題：

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

或

$(window).load(function() { 
    $(element).show(); 
});

來源

2013-01-14 20:39:57

從javascript文件加載css時，我應該如何保持html輸出隱藏，直到加載css文件？

回答

相關問題