modo corretto di ottenere diversi script in modo asincrono utilizzando jQuery con il post-documento-ready richiamata

Question

Sto pensando di ottenere diversi file JS dal mio server in modo asincrono durante il caricamento della pagina. Sono a conoscenza della funzione JQuery "getScript", ma questo ottiene solo 1 script. C'è un modo per specificare un callback da eseguire quando un batch di script è stato recuperato dal server?

ho pensato di fare qualcosa di simile:

$.getScript(script1, function() { 
$.getScript(script2, function() { 
$.getScript(script3, function() { 
... 
... 
});});....}); 

Ma questo carichi gli script in sequenza, e vorrei le richieste di essere condotti in parallelo.

Come una domanda più generale che sostituisce questa, qual è il modo migliore per caricare N risorse (CSS, immagini, script, ecc.) Specificando in modo asincrono un singolo callback da eseguire quando tutte le risorse sono state caricate?

Aggiornamento: Oltre a questo, ho bisogno che il callback sia eseguito dopo che il documento è pronto (segnalato dall'evento $ (documento) .ready). Qualche modo per raggiungere questo?

Answer 1

devi chiamare getScript 3 volte consecutive, superando un callback che incrementa un contatore di chiamare il vero callback se il contatore è 3.

È possibile effettuare una semplice funzione wrapper per fare questo:

function getScripts(names, callback) { 
    var received = 0; 
    var realCallback = function() { 
     received++; 
     if (received === names.length) 
      $(callback); 
    }; 

    for (var i = 0; i < names.length; i++) 
     $.getScript(names[i], realCallback); 
} 

(A cura di chiamare la callback quando il documento è pronto)

si può chiamare in questo modo:

getScripts([ "script1", "script2", "script3" ], function() { ... }); 

Answer 2

1. Inizializza una variabile counter con il numero di risorse da recuperare.
2. Utilizzare la stessa callback per ciascuna operazione asincrona.
3. Questa callback dovrebbe diminuire counter e controllarne il valore. Una volta che arriva a zero, dovrebbe richiamare il codice da attivare al completamento.

Answer 3

var _couter=0; 
var _calledScripts=0; 
function _loadScripts(arrayOfScripts,_callBackFunction) 
{ 
    _counter=arrayOfScripts.length; 
    _calledScripts=0; 
    jQuery.each(arrayOfScripts,function(index,item){ 
      jQuery.getScript(item, function(){ 
       _calledScripts++; 
       if(_calledScripts==_couter) 
       { 
        _callBackFunction() 
       } 
      }); 
    }); 
} 

Answer 4

io uso async.js di fare questa roba: