web-dev-qa-db-ja.com

ページを表示する前にブラウザにCSSをロードさせる

サイトのモバイルバージョンを作成しました。ただし、ページをロードするときは、CSSを適用せずに最初にサイトが表示され、2番目に（多くても）CSSが適用されて適切にレンダリングされます。この動作は、すべてのブラウザー（モバイルブラウザーを含む）で一貫しています。

どのようにしてブラウザにCSSを最初にロードさせ（実際にはサイズが非常に小さい）、thenでコンテンツをレンダリングすることができますか？ headの外部にCSSファイルを含めることについて何かを見たことがありますが、それが仕様に反している限り、そのようなハッキングが一部のモバイルブラウザで問題を引き起こす可能性があると思います。

ありがとう！

更新

これがソースです

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Albite BOOKS mobile</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
    <meta name="description" content="Free e-books for Java Mobile phones."/>
    <meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, Java mobile"/>
    <meta name="language" content="en_GB"/>
    <meta name="classification" content="public"/>

    <link rel="shortcut icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <!-- .... -->
  </body>
</html>
htmlcssbrowser
21
Albus Dumbledore

私はこれを処理するより良い方法を見つけたと思います...

出力ファイルの先頭に次のように記述します。

<head><div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div></head>

次に、最後に読み込まれたCSSファイルの最後の行に次のように入力します。

#loadOverlay{display: none;}

これは基本的にそれ自体に対する問題を使用します。ロードされる表示可能なHTMLの最初のビットは、CSSがロードおよび処理される間、何よりも上に空白のキャンバスを配置します。ロードおよび処理されるCSSの最後のビットは、キャンバスを削除します。私のテストから、これは問題を完全に解決します。

37
Nate Bunney

Requirejsを使用したことがありますか？あなたの後に設定することができます

requirejs.config(<confObj>);

このようなもの

require(Array[<all your CSS & JS >]);

requirejsはあなたに代わってキャッシュ（のような）を行います！ requirejs api

2
Lazaros Kosmidis

ブラウザは上から下にコードを読み取るため、ページ上のコードが高いほど、またコードがどの程度コンパクトであるかによって、ページの読み込み時間が影響を受けます。画像などを使用する場合のように実際にプリロードすることはできないため、ファイルのキャッシュについて詳しく調べます。おそらく、これが最良の解決策です。申し訳ありませんが、これに対するより良い代替手段はありません。しかし、正直に言うと、1秒の読み込み時間はそれほど悪くありません。

1
Blake

次の簡単な手法でCSSが読み込まれるまで、HTML要素が表示されないようにすることができます。

// CSS
#my-div { display:block !important; }

// HTML
<div id = "my-div" style = "display:none;">

  <p>This will be display:none until the CSS is applied!</p>

</div>

Divタグにはdisplay:noneインラインスタイルとして、CSSが適用されるまで表示されません。 display:block !importantルールが適用され、divのインラインスタイルが上書きされ、divは完全にスタイル設定された状態で表示されます。

1
Frank

Nathan Bunney-私にインスピレーションを与えた良いアイデアですが、ドキュメントが完全に読み込まれた後にJavaScriptでオーバーレイを削除する方が良いと思います。

$(document).ready( function() {
  $("#loadOverlay").css("display","none");
});
1
mkoziol