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();

即使第二个看起来很冗长，我更喜欢。（只是个人意见，如果有更好的选择，请纠正我）

Answer 2

如果您没有退出同一个域名，可以使用getScript()

var scriptUrls = ["http://x/foo", "http://x/bar"];
var loadScr;
loadScr = function(){
    if(scriptUrls.length==0)return;
    var currentUrl = scriptUrls.pop();
    $.getScript(url, loadScr);
}
loadScr();

Answer 3

您是否要确保脚本以正确的顺序加载，即使它们的编写顺序错误？也许你应该把你的函数作为数组给对象，并在“while”循环中检查它，以确保在加载“之前的requeriments”之前没有人被加载。但是你需要或者从.js中写下并阅读这些重新获得的内容，或者制作一份包含requeriments的清单。

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

3 个答案: