JavaScript: comment créer un événement JS qui nécessite 2 fichiers JS distincts à charger en premier lors du téléchargement asynchrone?

Question

Je souhaite effectuer des téléchargements JavaScript asynchrones de deux fichiers auxquels des dépendances sont attachées.

// asynch download of jquery and gmaps 
function addScript(url) { 
    var script = document.createElement('script'); 
    script.src = url; 
    document.getElementsByTagName('head')[0].appendChild(script); 
} 
addScript('http://google.com/gmaps.js'); 
addScript('http://jquery.com/jquery.js'); 

// define some function dependecies 
function requiresJQuery() { ... } 
function requiresGmaps() { ... } 
function requiresBothJQueryGmaps() { ... } 

// do some work that has no dependencies on either JQuery or Google maps 
... 

// QUESTION - Pseudo code below 
// now call a function that requires Gmaps to be loaded 
if (GmapsIsLoaded) { requiresGmaps(); } 

// QUESTION - Pseudo code below 
// then do something that requires both JQuery & Gmaps (or wait until they are loaded) 
if (JQueryAndGmapsIsLoaded) { requiresBothJQueryGmaps(); } 

Question: Comment puis-je créer un événement pour indiquer quand:

• JQuery est chargé?
• Google Maps est chargé
• JQuery & Google Maps sont tous deux chargés?

Answer 1

Vous pouvez attacher un écouteur d'événement à l'événement load sur les <script> éléments créés pour être informé lorsque les objets sont chargés. Cet écouteur d'événement peut vérifier quels scripts sont chargés et appeler les fonctions appropriées lui-même.

function scriptLoaded() { 
    // one of our scripts finished loading, detect which scripts are available: 
    var jQuery = window.jQuery; 
    var maps = window.google && google.maps; 

    if (maps && !requiresGmaps.called) { 
    requiresGmaps.called = true; 
    requiresGmaps(); 
    } 
    if (jQuery && !requiresJQuery.called) { 
    requiresJQuery.called = true; 
    requiresJQuery(); 
    } 
    if (maps && jQuery && !requiresBothJQueryGmaps.called) { 
    requiresBothJQueryGmaps.called = true; 
    requiresBothJQueryGmaps(); 
    } 
} 
// asynch download of script 
function addScript(url) { 
    var script = document.createElement('script'); 
    script.src = url; 
    // older IE... 
    script.onreadystatechange=function() { 
     if (this.readyState == 'complete') scriptLoaded.call(this); 
    } 
    script.onload=scriptLoaded; 

    document.getElementsByTagName('head')[0].appendChild(script); 
} 

addScript('http://google.com/gmaps.js'); 
addScript('http://jquery.com/jquery.js'); 

// define some function dependecies 
function requiresJQuery() { ... } 
function requiresGmaps() { ... } 
function requiresBothJQueryGmaps() { ... }