javascript - 如何按顺序动态加载多个脚本？

Question

我懒惰地加载各种脚本，具体取决于我所在的页面。到目前为止，我每页只加载一个。现在我开始清理和减少脚本的数量，我不得不为同一个页面延迟加载两个脚本(或更多)脚本。一个脚本依赖于另一个脚本，因此我需要以正确的顺序加载它们。

实现此目标的最佳方法是什么？

我的代码:

// Plupload must load before imageHandling.js
jQuery(document).ready(function() {
    //Conditional load
    load_script('.image-drop-box','vendor/plupload/plupload.full.min.js');
    load_script('.image-drop-box','imageHandling.js');

});


// Script loader
// .exists() is a custom func that checks if an element exists on page
function load_script(element, js) {
    $(element).exists(function(){
        var script = document.createElement('script');
        var footer = document.getElementById('footer');
        script.type = 'text/javascript';
        script.src = '/js/'+ js;
        footer.appendChild(script);
    });
}

Answer 1

有一个带有回调的 jquery 插件。你可以使用它，回调函数将在加载第一个脚本后触发，这个插件使用延迟加载系统

jquery loadscript plugin用法

$.loadScript( url [, callback()] )

或

var s= ["http://firstLink", "http://secondLink"];
function get_script(){
    if(scripts.length==0)
        return;
    var x = s.pop();
    $.ajax({
      url: x,
      dataType: "script",
      async:true,
      success: function(){
        get_script();
      },
      error: function(){
            //console.log( x+ 'failed' );
      }
    });
}
get_script();

虽然第二个看起来很长，但我更喜欢那个。(只是个人意见，如果有更好的选择，请指正)