CSSが遅くロードされるので、htmlが奇妙に見える

よくある質問ですが、HTML、CSS、JQueryでWebページを作成しています。ページの読み込みが開始されると、最初にhtmlが読み込まれ、cssとjqueryによって隠されているはずのdivが表示されます。しかし、1秒後には完璧に見えます。しかし、その最初の2番目のひどい見えます。どうすればそれを避けることができますか？CSSが遅くロードされるので、htmlが奇妙に見える

出典

2013-03-16 Arif YILMAZ

あなたのCSSファイルはドキュメントのHEADにリンクされていますか？ –

はい、それは頭の中にリンクされています –

jqueryでクラスを設定してから、クラスを隠しているのですか、まったく隠すためにjqueryを使用していますか？一般的に、CSSを 'display：none;'に設定してjqueryを使って表示する方が速いです。インラインCSSである必要はありませんが、jQueryではなくCSSで高速です。 – Scott

私はこのような経験はありませんでしたが、スクリプトの読み込み手順を参考にしてください。ページが何を意味するのか（私には知られていない）によって、この方法で読み込むことをお勧めします。

表示のdiv使用してCSS

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

は、あなたのbodyタグの終了前に、jQueryのファイルをロードします。

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

出典

2013-03-16 11:35:59 OmniPotens

汚いソリューションは、インラインCSSです：

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

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

出典

2013-03-16 11:24:02 erenon

私のプロジェクトは大きいので、できません。 –

どちらがお手伝いできませんか？ – erenon

私はインラインCSSを使用できません –

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

jQueryのより遅いロードするためのDOMを待つ必要があります。 CSSはそうではありません。ロード時に非表示にする要素を隠すようにCSSを設定し、jQueryを使用してその要素を表示します。

出典

2013-03-16 11:34:59 Scott

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

jQueryに関しては—とスコットは—をお答えしましたが、dom readyでもっとも早く起きたいと思っています。ウィンドウの読み込みを待っている場合、これはさらに遅くなります。純粋なjavascriptでは、ページ内に隠す必要のある要素の後にスクリプトタグを配置することができます。そして、doument.getElementByIdを使用して直接ターゲットを設定し、displayをnoneに設定して、ページの準備を待つ必要はありません。

出典

2013-03-16 11:42:22 Pebbl

CSSが遅くロードされるので、htmlが奇妙に見える

答えて

関連する問題