從JavaScript文件加載CSS時，在加載CSS文件之前，如何隱藏html輸出？

Question

當javascript創建包含所有我的輸出的父div時，我用element.style.display = 'none'隱藏了它。 出於性能目的，我認為讓我的插件（javascript）在開始時加載CSS文件是最快的方法。 然后，css將在加載后使父div再次可見。 但是，如果在創建div之前加載了css文件，那么當到達代碼中的該點時，javascript會不會仍然將其隱藏？ 在這里使用！important標簽似乎很便宜。 另外，在創建div之后加載css文件僅意味着輸出將需要更長的時間才能顯示給用戶。 我想知道是否有對此的標准解決方案，但是還沒有找到。 謝謝！

Answer 1

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

您可能會檢查CSS鏈接參考是否已加載，這是更高的級別，但是我建議David Flanagan撰寫的JavaScript書。

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

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

在some.css文件中：

body { display: inherit; }

不知道inherit ，也許block會工作。 嘗試。

Answer 2

創建包裝程序DIV時，Give是類似“ hideMe”的類名，並且將hideMe的定義定義為display:none 。 當您想要顯示它時，請刪除該類（或重新定義它）。

Answer 3

您可以使用jQuery並通過以下方法解決此問題：

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

要么

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