使用jQuery包含一个JS文件,并等待它加载

时间:2014-06-20 09:58:38

标签: javascript jquery

我想在运行时包含一些脚本,浏览器必须等到脚本加载或依赖性解析。

5 个答案:

答案 0 :(得分:1)

您可以添加script元素,并将src等属性附加到document.createElement并将其放入您的DOM

答案 1 :(得分:1)

尝试类似

的内容
    $.when(
        $.getScript( "sample.js" ),
        $.getScript( "simple.js" ),
        $.getScript( "jquery.js" ),
        $.Deferred(function( deferred ){
        $( deferred.resolve );
       })
       ).done(function(){
            //place your code here, the scripts are all loaded
    });

答案 2 :(得分:0)

您可以将promises与getScript()一起使用,并等到所有脚本都加载完毕,例如:

$.when(
    $.getScript( "/mypath/myscript1.js" ),
    $.getScript( "/mypath/myscript2.js" ),
    $.getScript( "/mypath/myscript3.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){

    //do something

});

答案 3 :(得分:0)

您可以通过$.getScript检索每个脚本,它返回一个同样为Promise的jqXHR对象。

如果您需要按顺序获取脚本,可以将这些脚本链接在一起:

$.getScript("script1.js")
    .then(function() { $.getScript("script2.js"); })
    .then(function() { $.getScript("script3.js"); })
    .then(function() {
        // They're all loaded, do your stuff
    });

如果您加载它们的顺序无关紧要,但您只需要知道它们何时完成,您可以并行加载它们,然后在使用$.when完成所有操作后调用它们:

$.when(
    $.getScript("script1.js"),
    $.getScript("script2.js"),
    $.getScript("script3.js")
).then(function() {
    // They're all loaded, do your stuff
});

答案 4 :(得分:0)

创建脚本

  var head= document.getElementsByTagName('head')[0];
  var script= document.createElement('script');
  script.type= 'text/javascript';
  script.src= 'your source';
  script.onreadystatechange= function () {
      if (this.readyState == 'complete') useScript();
  }
  script.onload= useScript;
  head.appendChild(script);

然后

function useScript(){
//use your script here
}

这样你就可以在脑中添加一个脚本标签,并在加载这个脚本时设置一个函数来调用(useScript)。

请注意,onreadystatechange处理程序仅适用于IE。 onload处理程序适用于其他浏览器