La respuesta es
Puede usar promesas con getScript()
y esperar hasta que se carguen todos los scripts, algo como:
$.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
});
VIOLÍN
OTRA FIDDLE
En el código anterior, agregar un diferido y resolverlo dentro $()
es como colocar cualquier otra función dentro de una llamada jQuery, como $(func)
, es lo mismo que
$(function() { func(); });
es decir, espera que el DOM esté listo, por lo que en el ejemplo anterior $.when
espera que se carguen todos los scripts y que el DOM esté listo debido a la $.Deferred
llamada que se resuelve en la devolución de llamada lista para DOM.
Para un uso más genérico, una función práctica
Se podría crear una función de utilidad que acepte cualquier conjunto de scripts de esta manera:
$.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);
}
que se puede usar así
var script_arr = [
'myscript1.js',
'myscript2.js',
'myscript3.js'
];
$.getMultiScripts(script_arr, '/mypath/').done(function() {
// all scripts loaded
});
donde la ruta se antepondrá a todos los scripts, y también es opcional, lo que significa que si la matriz contiene la URL completa, también se podría hacer esto, y dejar de lado la ruta todos juntos
$.getMultiScripts(script_arr).done(function() { ...
Argumentos, errores, etc.
Como comentario adicional, tenga en cuenta que la done
devolución de llamada contendrá una serie de argumentos que coinciden con los pasados en los scripts, cada argumento representa una matriz que contiene la respuesta
$.getMultiScripts(script_arr).done(function(response1, response2, response3) { ...
donde cada matriz contendrá algo así [content_of_file_loaded, status, xhr_object]
. Por lo general, no necesitamos acceder a esos argumentos ya que los scripts se cargarán automáticamente de todos modos, y la mayoría de las veces la done
devolución de llamada es todo lo que realmente buscamos para saber que todos los scripts se han cargado, solo lo agrego para completarlo , y para las raras ocasiones en que se necesita acceder al texto real del archivo cargado, o cuando se necesita acceso a cada objeto XHR o algo similar.
Además, si alguno de los scripts no se carga, se llamará al manejador de errores y no se cargarán los scripts posteriores.
$.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
});
$.Deferred(function( deferred ){$( deferred.resolve );})
aquí?