您可以使用promises getScript()并等待所有脚本都加载,例如:
$.when(
$.getScript( "/mypath/myscript1.js" ),
$.getScript( "/mypath/myscript2.js" ),
$.getScript( "/mypath/myscript3.js" ),
$.Deferred(function( deferred ){
$( deferred.resolve );
})).done(function(){
//place your code here, the scripts are all loaded});
小提琴
ANOTHER FIDDLE
在上面的代码中,添加一个Deferred并将其解析为内部$()就像在jQuery调用中放置任何其他函数一样$(func),就像它一样
$(function() { func(); });
即它等待DOM准备就绪,因此在上面的例子中$.when等待加载所有脚本并且由于$.Deferred在DOM就绪回调中解析的调用而使DOM准备就绪。
对于更通用的用途,一个方便的功能
可以像这样创建一个接受任何脚本数组的实用程序函数:
$.getMultiScripts = function(arr, path) {
var _arr = $.map(arr, function(scr) {
return $.getScript( (path||"") + scr );
});
_arr.push($.Deferred(function( deferred ){
$( deferred.resolve );
}));
return $.when.apply($, _arr);}
可以像这样使用
var script_arr = [
'myscript1.js',
'myscript2.js',
'myscript3.js'];
$.getMultiScripts(script_arr, '/mypath/').done(function() {
// all scripts loaded});
路径将被添加到所有脚本的位置,并且也是可选的,这意味着如果数组包含完整的URL,那么也可以执行此操作,并将所有路径全部放在一起
$.getMultiScripts(script_arr).done(function() { ...
争论,错误等
另外,请注意done回调将包含许多与传入脚本匹配的参数,每个参数表示包含响应的数组
$.getMultiScripts(script_arr).done(function(response1, response2, response3) { ...
每个数组都包含类似的内容[content_of_file_loaded, status, xhr_object]。我们通常不需要访问这些参数,因为无论如何都会自动加载脚本,并且大部分时间done回调都是我们真正知道所有脚本都已加载的,我只是为了完整而添加它,以及在需要访问加载文件的实际文本或需要访问每个XHR对象或类似内容的极少数情况下。
此外,如果任何脚本无法加载,将调用失败处理程序,并且不会加载后续脚本
$.getMultiScripts(script_arr).done(function() {
// all done
}).fail(function(error) {
// one or more scripts failed to load
}).always(function() {
// always called, both on success and error
});
来源:https://www.imooc.com/wenda/detail/585143
|