Question

我不确定我是否正确使用head.js。在我的html文档的标题中，我通过以下方式调用head.js文件：

<script src="/scripts/head.min.js" type="text/javascript"></script>

然后就在关闭之前＆lt; / body＆gt;在html页面中标记，我调用以下文件：

<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完全加载后，它应首先加载滑块然后再加载。
然后滑块功能应该加载，因为它取决于滑块，
最后，函数应该加载，因为它依赖于jquery和jquerytools。

Answer 1

你应该像这样调用这些脚本:(同样删除http，不需要它。另外Jquery总是首先加载任何脚本。在这种情况下，headJS优先于jquery然后你的所有脚本）

<script src="/scripts/head.min.js" type="text/javascript"></script>
// this loads asyncrounously & in parallel
head.load("//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js", "//cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js", "/scripts/jquery.nivo.slider.pack.js", "/scripts/jquery.prettyPhoto.js", "/scripts/slidercode.js", "/scripts/functions.js");

然后就在关闭之前＆lt; / body＆gt;在html页面中标记，我调用以下文件：

<script>
head.ready(function () {
        // some callback stuff
        $('#slider').nivoSlider({
    effect:'sliceDown',
    controlNav: false
});
    });
<script>

Answer 2

以上代码是否导致javascript文件在同一个文件中执行他们列出的确切顺序还是有时无序执行？

是的，他们加载asyn，但按顺序执行。

我认为即使您将head.ready("slider", function() {} );放在load.js之外，{{1}}也应该有效。尝试在load.js脚本块之后添加它。

使用head.js以正确的顺序正确加载脚本和依赖项？

2 个答案: