等待腳本加載已通過javascript添加

Question

我需要添加jquery，然後依賴於jquery的另一個腳本。 然後我需要使用這兩個資產的代碼，但我的問題是，我不希望我的代碼運行，直到我知道兩個資產都加載。

我認爲這個過程是加載jquery，然後等待，直到jquery通過等待window.onload加載，然後加載jquery插件，然後檢測插件已經加載，然後加載我自己的代碼，使用函數從jquery插件。

到目前爲止的代碼：

// load jquery if it is not allready loaded and put it into no conflict mode so the $ is available for other librarys that might be allready on the page. 
    if(!window.jQuery) { 
    var script = document.createElement('script'); 
    script.type = "text/javascript"; 
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"; 
    document.getElementsByTagName('head')[0].appendChild(script); 
    jQuery.noConflict(); // stop jquery eating the $ 
    console.log("added jquery"); 
    } 

    window.onload = function(e) { 
    // we know that jquery should be available now as the window has loaded 
    if (!jQuery.isFunction(jQuery.fn.serializeObject)) { // use jquery to ask if the plugins function is allready on the page (don't do this if the website already had the plugin) 
     // website didn't have the plugin so add it to the page. 
     var script = document.createElement('script'); 
     script.type = "text/javascript"; 
     script.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js"; 
     document.getElementsByTagName('head')[0].appendChild(script);  
    } 
    if (!jQuery.isFunction(jQuery.fn.serializeObject)) { 
    // console.log("serializeObject is undefined"); 
// its going to be undefined here because Its still loading in the script  
    } else { 
    // console.log("we have serializeObject"); 
    } 
    // I now dont know when to call my code that uses .serializeObject() because it could still be loading 

    // my code 
    var form_data_object = jQuery('form#mc-embedded-subscribe-form').serializeObject(); 
}; 

Answer 1

你要做像

包括

<script type="text/javascript" id="AssetJS"></script> 

腳本

$("#AssetJS").attr("src", "Asset.js"); 

$("#AssetJS").load(function() { 
    //after loaded jquery asset do your code here 
}) 

Answer 2

一個簡單的方法是使用headjs。它在幾個項目上運行良好。

Answer 3

好吧，我設法找到另一種方式，爲我的具體需求工作，所以我回答我自己的問題。 從http://www.sitepoint.com/dynamically-load-jquery-library-javascript/

function loadScript(url, callback) { 
var script = document.createElement("script") 
script.type = "text/javascript"; 

if (script.readyState) { //IE 
    script.onreadystatechange = function() { 
     if (script.readyState == "loaded" || script.readyState == "complete") { 
      script.onreadystatechange = null; 
      callback(); 
     } 
    }; 
} else { //Others 
    script.onload = function() { 
     callback(); 
    }; 
} 

script.src = url; 
document.getElementsByTagName("head")[0].appendChild(script); 

}

和使用在我的情況下使用此功能：

if(!window.jQuery) { 
loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js", function() { 
    jQuery.noConflict(); // stop jquery eating the $ 
    console.log('jquery loaded'); 

    if (!jQuery.isFunction(jQuery.fn.serializeObject)) { // use jquery to ask if the plugins function is already on the page 
     loadScript("https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js", function() { 
      console.log('serialize loaded'); 
      SURGE_start(); // both scrips where not on the website but have now been added so lets run my code now. 
     }); 
    } 
}); 
} else { 
if (!jQuery.isFunction(jQuery.fn.serializeObject)) { // use jquery to ask if the plugins function is already on the page 
    loadScript("https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js", function() { 
     console.log('serialize loaded'); 
     SURGE_start(); // jquery was on the web page but the plugin was not included. now we have both scripts lets run my code. 
    }); 
} else { 
    SURGE_start(); // web page already had both scripts so just run my code. 
} 
}