Question

我需要添加jquery，然后添加另一个依赖于jquery的脚本。然后我需要使用两种资产的代码，但我的问题是我不希望我的代码运行，直到我知道两个资产都已加载。

我认为进程是加载jquery，然后等待，直到等待window.onload加载jquery，然后加载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

你必须这样做

包含

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

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

脚本

{{1}}

Answer 2

好的，我设法找到另一种适合我特定需求的方式，所以我回答了我自己的问题。在dataTable api

中使用此功能

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.
}
}

Answer 3

一种简单的方法是使用headjs。它在几个项目中运作良好。

等待加载通过javascript添加的脚本

3 个答案: