大きな CSS ファイルの読み込みを延期する方法: 動的 JavaScript 読み込みを使用する必要がありますか?

大きな CSS ファイルの読み込みを延期する方法

CSS 配信の最適化の一環として、大きな CSS ファイルの読み込みを延期することができます。ページが読み込まれるまで。これは、次のアプローチを使用して実現できます。

JavaScript を使用して CSS ファイルを動的にロードする

1 つのオプションは、JavaScript を使用してページの後に CSS ファイルを動的にロードすることです。ロードされました。たとえば、jQuery を使用すると、次のコードを使用できます:

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

ページが読み込まれた後にこの関数を呼び出すことができます。

検証するには JavaScript を無効にしてください

このアプローチが機能することを確認するには、ブラウザーで JavaScript を無効にし、ページをリロードします。ページが読み込まれるまで CSS ファイルは読み込まれないことがわかります。

非 JavaScript アプローチに関する注意

純粋な JavaScript アプローチを希望する場合、または他の JavaScript フレームワークについては、以下にコメントしてください。追加のソリューションを提供できます。

特定のユースケースに最適なソリューションを見つけるには、さまざまなアプローチを試し、独自の環境でテストすることを常にお勧めします。

以上が大きな CSS ファイルの読み込みを延期する方法: 動的 JavaScript 読み込みを使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。