13

よくある質問があります。HTML、CSS、および JQuery で Web ページを作成しています。ページの読み込みが開始されると、最初に html が読み込まれ、css と jquery によって隠されるはずの div が 1 秒間表示されます。しかし、1 秒後には完璧に見えます。しかし、その最初の 1 秒はひどく見えます。どうすればそれを回避できますか?

4

4 に答える 4

5

私はそのような経験はありませんが、スクリプトの読み込み手順がここで役立つはずです。ページの目的にもよりますが (私にはわかりません)、この方法でロードすることをお勧めします。

CSS を使用して div を表示する

<div style="display: none;">Hidden by default</div>

body タグを閉じる前に JQuery ファイルをロードします。

ページが完全に読み込まれると、適切に機能します。

于 2013-03-16T11:35:59.387 に答える
4

$(this).hide();または$(this).addClass('.hidden');常により遅い.class { display:none; }

jQuery は、DOM がロードされるまで待機する必要があります。CSS はそうではありません。ロード時に非表示にする必要がある要素を非表示にするように CSS を設定し、jQuery を使用してそれらの要素を表示します。

于 2013-03-16T11:34:59.447 に答える
2

汚い解決策はインラインCSSです:

<div style="display: none;">This will be hidden</div>

より良い解決策は、javascript を使用してこれらの要素をオンデマンドで構築することです。

于 2013-03-16T11:24:02.527 に答える
2

css をより速くレンダリングしたい場合は、隠し css ステートメントを独自の小さなファイルに移動するか、実際に隠し css を<style>ページのタグに追加することをお勧めします。これは、それらがほぼ即座にレンダリングされることを意味します。

jQuery に関しては、Scott が述べたように、期待できる最速の方法はdom ready. ウィンドウの読み込みを待っている場合、これはさらに遅くなります。純粋な JavaScript を使用すると、ページ内で非表示にする必要がある要素の後にスクリプト タグを配置できます。そして、ページの準備が整うのを待たずに、を使用してそれらを直接ターゲットにしてdoument.getElementByIdに設定できます。displaynone

于 2013-03-16T11:42:22.830 に答える