私はジレンマを持っていました。先に隠れる要素が最もアクセスしやすい方法
私の目的は、ページをレンダリングするために行わなければならない再塗りとリフローの量を減らすことです。これまでのところ、私はコード形式のこの種に従うことによって多くを達成した：
<html>
<head>
<title>whatever</title>
</head>
<body>
<div ID="page">
<!-- All visible page content and normal HTML here -->
</div>
<script>
document.getElementById('page').style.visibility="hidden";
// functions to manipulate dom and styles of elements go here
document.getElementById('page').style.visibility="visible";
</script>
</body>
</html>
をこれまでのところ、このフォーマットは、私はしかし、いくつかの問題を参照してくださいInternet Explorerの7を含むすべてのブラウザで正常に動作します。
ページが処理されると（特にスローモーションの場合）、スタイルが適用されずにページ全体がレンダリングされ、JavaScriptが実行されている間はページ全体が白くなり、実行後にスタイルが適用されます。
私がやりたかったことは、JavaScriptが有効になっているユーザーが、すべてが完了するまでページを空白にしてすべてを一度に表示する場所にすることです。私は再描画とリフローを最小限に抑えようとしています（私はバックグラウンドですべてをやりたいので）。
は、ここで私は考えなしの成功にこれまでに試したものです：
コード＃1：CSSが有効とJavaScriptが無効になっているユーザーが表示されますので、
<html>
<head>
<title>whatever</title>
<style>
#page{visibility:hidden}
</style>
</head>
<body>
<div ID="page">
<!-- All visible page content and normal HTML here -->
</div>
<script>
// functions to manipulate dom and styles of elements go here
document.getElementById('page').style.visibility="visible";
</script>
</body>
</html>
このコードは動作しません。ページが読み込まれると空白の画面が表示されます。使用しているブラウザや設定に関係なく、すべてのユーザーにコンテンツを表示させたい。
コード＃2：それはinnerHTMLプロパティaccross来るとき
<html>
<head>
<title>whatever</title>
<script>
var x=document.getElementsByTagName("STYLE")[0];
if(x){
x.innerHTML+="#WR{visibility:hidden}";
}
</script>
</head>
<body>
<div ID="page">
<!-- All visible page content and normal HTML here -->
</div>
<script>
// functions to manipulate dom and styles of elements go here
document.getElementById('page').style.visibility="visible";
</script>
</body>
</html>
これは、Internet Explorer 7で、最大動作します。状態：
Line: 1 Char: 55 Error: Unknown runtime error Code: 0
次にこのコードを試しました。
コード＃3：
<html>
<head>
<title>whatever</title>
<script>
var x=document.getElementById("WR");
if(x){
x.style.visibility="hidden";
}
</script>
</head>
<body>
<div ID="page">
<!-- All visible page content and normal HTML here -->
</div>
<script>
// functions to manipulate dom and styles of elements go here
document.getElementById('page').style.visibility="visible";
</script>
</body>
</html>
のInternet Explorer 7つのレポート：
Line: 1 Char: 1 Error: Object doesn't support this property or method Code: 0
私はwindow.にdocument.を変更しようと、私はまだ上記のエラーが表示されます。接頭辞を削除してちょうどgetElementById("WR")を使用した場合、IE7からObject Expectedエラーが発生します。
可能な限り多くのWebブラウザ（新規および古い）でjavascriptを有効にすると、画面全体が空白になり、JavaScriptが処理を終了すると画面が再表示されるように修正できますか？
<head>と</head>の間にJavaScriptの量を制限したいのですが、自分のサイトにAdSense広告があり、HTMLのコードが低すぎないようにしたいので、ページをすばやく読み込みたいと思っています。
getElementById - 小文字d。 – James
あなたはそれについて正しいですが、それは完全に問題を解決するわけではありません。 IDを目立たせるためにgetelementbyidとタイプするときには、大文字IDを使用する習慣があります。 – Mike