よくある質問があります。HTML、CSS、および JQuery で Web ページを作成しています。ページの読み込みが開始されると、最初に html が読み込まれ、css と jquery によって隠されるはずの div が 1 秒間表示されます。しかし、1 秒後には完璧に見えます。しかし、その最初の 1 秒はひどく見えます。どうすればそれを回避できますか?
4 に答える
私はそのような経験はありませんが、スクリプトの読み込み手順がここで役立つはずです。ページの目的にもよりますが (私にはわかりません)、この方法でロードすることをお勧めします。
CSS を使用して div を表示する
<div style="display: none;">Hidden by default</div>
body タグを閉じる前に JQuery ファイルをロードします。
ページが完全に読み込まれると、適切に機能します。
$(this).hide();
または$(this).addClass('.hidden');
常により遅い.class { display:none; }
jQuery は、DOM がロードされるまで待機する必要があります。CSS はそうではありません。ロード時に非表示にする必要がある要素を非表示にするように CSS を設定し、jQuery を使用してそれらの要素を表示します。
汚い解決策はインラインCSSです:
<div style="display: none;">This will be hidden</div>
より良い解決策は、javascript を使用してこれらの要素をオンデマンドで構築することです。
css をより速くレンダリングしたい場合は、隠し css ステートメントを独自の小さなファイルに移動するか、実際に隠し css を<style>
ページのタグに追加することをお勧めします。これは、それらがほぼ即座にレンダリングされることを意味します。
jQuery に関しては、Scott が述べたように、期待できる最速の方法はdom ready
. ウィンドウの読み込みを待っている場合、これはさらに遅くなります。純粋な JavaScript を使用すると、ページ内で非表示にする必要がある要素の後にスクリプト タグを配置できます。そして、ページの準備が整うのを待たずに、を使用してそれらを直接ターゲットにしてdoument.getElementById
に設定できます。display
none