簡體   English   中英

使用head.js以正確的順序正確加載腳本和依賴項?

[英]Properly loading scripts and dependencies in correct order using head.js?

我不確定我是否在正確使用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文件中,我需要確保:

  1. jQuery首先加載。
  2. jQuery完全加載后,jquerytools將加載
  3. 完全加載jquery之后,應該先加載滑塊,然后再加載prettyphoto。
  4. 然后應該加載滑塊功能,因為它取決於滑塊,
  5. 最后,函數應該加載,因為它依賴於jquery和jquerytools。

您應該這樣調用腳本:(也刪除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");

然后在html頁面中的</ body>標記之前,我調用以下文件:

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

上面的代碼是否導致javascript文件按照列出的確切順序執行,或者有時會不按順序執行?

是的,它們加載了asyn,但是按順序執行。

我認為head.ready("slider", function() {} ); 即使將其放置在load.js之外,它也應該load.js 嘗試在load.js腳本塊之后添加它。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM