65

開発者向けの Google ドキュメントに従ってCSS 配信を最適化しようとしています https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example

小さな CSS ファイルをインライン化する例でわかるように、重要な CSS はヘッドでインライン化され、元の small.css はページのオンロード後にロードされます。

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

この例に関する私の質問:

ページのオンロード後に大きな css ファイルをロードする方法は?

4

8 に答える 8

49

jQuery を使用してもかまわない場合は、簡単なコード スニペットを参考にしてください。(それ以外の場合はコメントしてください。純粋な js の例を書きます

function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='"+src+" />"));
    }
};

$(document).ready()orwindow.onload関数でこれを呼び出すだけで、準備完了です。

＃2、試してみませんか？ブラウザで Javascript を無効にしてください。

ところで、単純な Google 検索でここまで検索できるのは驚くべきことです。クエリ"post load css"の場合、これは 4 番目のヒットでした... http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery

于 2013-10-15T06:55:48.240 に答える
38

Fred が提供する関数を少し変更して、より効率的で jQuery を使用しないようにします。私は自分のウェブサイトの本番環境でこの機能を使用しています

        // to defer the loading of stylesheets
        // just add it right before the </body> tag
        // and before any javaScript file inclusion (for performance)  
        function loadStyleSheet(src){
            if (document.createStyleSheet) document.createStyleSheet(src);
            else {
                var stylesheet = document.createElement('link');
                stylesheet.href = src;
                stylesheet.rel = 'stylesheet';
                stylesheet.type = 'text/css';
                document.getElementsByTagName('head')[0].appendChild(stylesheet);
            }
        }
于 2014-03-07T16:14:03.357 に答える
0

body タグの後に、ページの下部にすべての css ファイルを配置することを導入することで、鉱山を修正しました。しかし、これにより新しい問題が発生します。ページは、スタイルを適用する前に、スタイルが設定されていない html を数ミリ秒間ロードします。このために、ページ上ですべてスタイル設定されたスプラッシュ スクリーンを導入して修正しました。

于 2019-11-15T10:41:20.943 に答える