head.js を正しく利用しているかどうかはわかりません。私のhtmlドキュメントのヘッダーで、次の方法でhead.jsファイルを呼び出します。
<script src="/scripts/head.min.js" type="text/javascript"></script>
次に、HTML ページの終了タグ </ body > の直前で、次のファイルを呼び出します。
<script src="/scripts/load.js" type="text/javascript"></script>
load.js ファイルには、次のコードがあります。
head.js(
{livechat: "/scripts/livechat.js"},
{jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"},
{jquerytools: "http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"},
{slider: "/scripts/jquery.nivo.slider.pack.js"},
{prettyphoto: "/scripts/jquery.prettyPhoto.js"},
{sliderfunctions: "/scripts/slidercode.js"},
{functions: "/scripts/functions.js"}
);
上記のコードにより、JavaScript ファイルがリストされているのとまったく同じ順序で実行されますか、それとも時々順不同で実行されますか?
load.js 内で次のコードを使用した場合にのみ、スライダーが最初に機能したため、質問します。
head.ready("slider", function() {
$('#slider').nivoSlider({
effect:'sliceDown',
controlNav: false
});
});
上記のコードを、次のコードを含むslidercode.jsという外部ファイルに移動することで、これを回避できました。
$(window).load(function() {
$('#slider').nivoSlider({
effect:'sliceDown',
controlNav: false
});
});
しかし、head.js を初めて使用するので、これが正しく最も効率的な方法であるかどうかはわかりません。基本的に、loader.js の JavaScript ファイルから、次のことを確認する必要があります。
- jquery が最初に読み込まれます。
- jquery が完全に読み込まれると、jquerytools が読み込まれます
- jquery が完全にロードされた後、最初にスライダーをロードし、次に prettyphoto をロードする必要があります。
- 次に、スライダーに依存するため、スライダー関数をロードする必要があります。
- 最後に、関数は jquery と jquerytools に依存しているため、ロードする必要があります。