異步加載js文件和其他相關的js文件

Question

我正在尋找一種乾淨的方式來異步加載以下類型的JavaScript文件：「核心」js文件（嗯，讓我們只是叫它，哦，我不知道，「jquery！」哈哈），x個依賴於正在加載的「core」js文件的js文件，以及其他不相關的js文件的數量。我有一些關於如何去做的想法，但不知道最好的方法是什麼。我想避免在文檔主體中加載腳本。

因此，舉例來說，我想下面的4個JavaScript文件異步加載，適當命名的：

/js/my-contact-page-js-functions.js // unrelated/independent script 
/js/jquery-1.3.2.min.js // the "core" script 
/js/jquery.color.min.js // dependent on jquery being loaded 
http://thirdparty.com/js/third-party-tracking-script.js // another unrelated/independent script 

但是，這是行不通的，因爲它不能保證jQuery是彩色插件之前加載中...

(function() { 
    var a=[ 
     '/js/my-contact-page-functions.js', 
     '/js/jquery-1.4.2.min.js', '/js/jquery.color.js', 
     'http://cdn.thirdparty.com/third-party-tracking-script.js', 
    ], 
    d=document, 
    h=d.getElementsByTagName('head')[0], 
    s, 
    i, 
    l=a.length; 
    for(i=0;i<l;i++){ 
     s=d.createElement('script'); 
     s.type='text/javascript'; 
     s.async=true; 
     s.src=a[i]; 
     h.appendChild(s); 
    } 
})(); 

幾乎不可能異步加載jquery和color插件嗎？ （由於顏色插件需要jQuery是第一次加載。）

我正在考慮第一種方法是剛剛合併使用jQuery源色彩插件腳本到一個文件中。

然後另一個想法我已經被加載插件的顏色，像這樣：

$(window).ready(function() { 
    $.getScript("/js/jquery.color.js"); 
}); 

任何人有你會如何去什麼想法？謝謝！

Answer 1

LabJS和RequireJS兩種流行的選擇現在。他們都使用jQuery，但採取稍微不同的方法，所以你應該看看兩者。

Answer 2

您可以利用YUI Loader至register your own modules and dependencies然後加載它們。

您可以獲得成功，失敗甚至進度的完整掛鉤，因此您可以掛接任何您喜歡的異步操作。

Answer 3

由於您提到的原因，您將無法完成異步加載;依賴。

對於我的10p，我會遵循$ .getScript（）路線。它基本上只是$ .ajax（）的一個包裝器，所以以這種方式加載腳本會爲您提供異步加載。

Answer 4

LABjs是專門針對這個問題製作的。

<script src="lab.js"></script> 
<script> 
    $LAB 
    .script("jquery.js") 
    .wait() 
    .script("jquery.color.js") 
    .script("jquery.otherplugin.js") 
    .script("mylib.js") 
    .wait() 
    .script("unrelated1.js") 
    .script("unrelated2.js"); 
</script> 

你也可以把不相關的腳本到自己$LAB鏈，如果他們真的沒有必要等待jQuery和其它腳本。

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.