web-dev-qa-db-ja.com

リクエストに応じて外部スタイルシートをロードできますか？

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

..リクエストに応じて外部JSをロードする上記のコードのように、必要に応じて外部CSSスタイルシートをロードするために利用可能な同様のものがありますか？

たとえば、サイトでライトボックス（インラインポップアップ）を使用する場合と同様に、ユーザーの要求がない限り、ライトボックスJSおよびCSSファイルをロード時にロードしないようにします。

ありがとう

jqueryloadrequestexternallightbox
46
3zzy

はい：スタイルシートにリンクする_<link>_タグを作成し、それを_<head>_タグに追加すると、ブラウザはそのスタイルシートをロードします。

例えば。

_$('head').append('<link rel="stylesheet" type="text/css" href="lightbox_stylesheet.css">');
_

ただし、、 @ peteorpeterのコメントによる 、これはIE 8では機能しませんまたは下—そこには、次のいずれかが必要です。

  1. _<link>_beforeを追加して、そのhref;を設定します。または
  2. iEのdocument.createStyleSheet()メソッドを使用します

また、リンクが既に追加されているかどうかを確認することは、すべてのブラウザーで確実に機能しません。

私もあなたの前提の一部に質問します：

ユーザーの要求がない限り、ライトボックスJSおよびCSSファイルをロード時にロードしないようにします。

どうして？ページの重量を減らすには？願望は理解できますが、CSSファイルとJSファイルのサイズを（縮小化とgzip圧縮後）そこにあるライトボックスコードで測定し、削減する価値があるかどうかを確認する必要があります。

  1. オンデマンドでロードする複雑さが増します。そして
  2. ライトボックスの応答性がわずかに低下します（オンデマンドでロードする場合、ライトボックスは、CSSとJSがロードされるのを待ってから処理を実行する必要があるため）

縮小とgzipの後、それほど大きな違いはないかもしれません。

また、CSSとJSを長時間キャッシュするようにブラウザーに指示できることを覚えておいてください。つまり、ユーザーが空のキャッシュでサイトにアクセスしたときにのみダウンロードされます。

65
Paul D. Waite
$('<link/>', {rel: 'stylesheet', href: 'myHref'}).appendTo('head');
28
Cody

できること：

$('<link>').attr('rel','stylesheet')
  .attr('type','text/css')
  .attr('href','link_to.css')
  .appendTo('head');
11
Reigel

ヘッドに動的HTMLコンテンツを追加するだけで、外部スタイルシートへの参照を追加できます。

$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');

このコンテンツはDOMに挿入され、その後正常にレンダリングされます。この場合、外部スタイルシートのフェッチが発生します。

ただし、静的コンテンツの動的な読み込みに注意を払っていない場合、ページの読み込み時間と過剰なリソース転送にコストがかかる可能性があるため、cletusの回答にも注意してください。

4
zombat

IEの問題...

IE 6,7,8でクラッシュしました

$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'assets/css/jquery.fancybox-1.3.4.css') );

別のhttp req、出来上がりを避けるために、それらをメインシートにコピーしました。

2
user541072

一般的に、あなたが正しくそうしていると仮定するのに必要なものすべてを含めるほうが良いでしょう。

つまり、静的コンテンツ（画像、Javascript、CSS）のベストプラクティスは次のとおりです。

  • 外部HTTPリクエストを最小化（ファイル数を最小化）;
  • ファイルをバージョン管理し、far futures Expiresヘッダーを使用します。
  • 必要に応じてコンテンツを縮小および圧縮します。

そのため、ユーザーは、指定されたファイルが変更されるまで一度しかダウンロードしません。

CSSとJavascriptを動的にロードすることは、例外的に大きくない限り、通常は保証されず、逆効果です。

2
cletus

直接追加できます

$("head").append($("<link rel='stylesheet' href='style.css' type='text/css' media='screen' />"));
0
subindas pm