JavaScript: как создать событие JS, требующее загрузки двух отдельных файлов JS при асинхронной загрузке? - PullRequest
Новая
       8

JavaScript: как создать событие JS, требующее загрузки двух отдельных файлов JS при асинхронной загрузке?

1 голос
/ 11 мая 2010

Я хочу выполнить асинхронную загрузку JavaScript двух файлов, к которым прикреплены зависимости. 

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

Вопрос: Как создать событие, чтобы указать, когда:

  • JQuery загружен?
  • Google Карты загружены
  • JQuery и Google Maps загружены?

1 Ответ

0 голосов
/ 11 мая 2010

Вы можете прикрепить прослушиватель событий к событию load на элементах <script>, которые вы создали, чтобы получать информацию о загрузке объектов.

Этот прослушиватель событий может проверить, какие скрипты загружены, и вызвать соответствующие функции самостоятельно. 

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() { ... }
...