[JS]条件付きでJavaScriptやCSSファイルをロードできるスクリプトローダー -Yepnope

プレフィックス(接頭辞)を使用して、ロードのタイミング、UAごとに必要なファイルだけをロードなど、条件付きでファイルをロードさせることができるスクリプトローダーを紹介します。

サイトのキャプチャ

yepnope.js -A Conditional Loader For Your Polyfills!

[ad#ad-2]

yepnope.jsの書式

yepnope.jsの基本書式は、下記のようになります。

yepnope(resources /* string | object | array */ [, $LABchain])

css!

プレフィックス「css!」を使用して、指定したファイルをCSSファイルとしてロードします。
※「.css」で終了していない名前はJavaScriptファイルとして認識されます。
例:cachebusted.css?version=1452318

yepnope({
  load : ['normal.css', 'css!cachebusted.css?version=1452318']
});

wait!

プレフィックス「wait!」を使用して、指定したファイル(a.js)の後にファイルをロードします。

yepnope([{
  load : ['wait!a.js', 'needs-a.js']
}]);

[ad#ad-2]

ie6!

プレフィックス「ie6!」を使用して、IE6のみファイル(ie-patch.js)をロードします。

yepnope([{
  load: ['normal.js', 'ie6!ie-patch.js']
}]);

IE用のプレフィックスは、下記のものが用意されています。

  • ie
  • ie5
  • ie6
  • ie7
  • ie8
  • ie9
  • iegt5
  • iegt6
  • iegt7
  • iegt8
  • ielt7
  • ielt8
  • ielt9

プレフィックスは繋げて使用することも可能です。
IE6, IE7のみファイルをロードする場合は、下記のようになります。

yepnope([{
  load: ['normal.js', 'ie6!ie7!ie-patch.js']
}]);

プレフィックスはカスタマイズすることも可能で、下記の書式になります。

yepnope.addPrefix(prefix /* string */, resourceHandler(resourceObj) /* function */)

sponsors

top of page

©2018 coliss