How to create a JS event that requires 2 separate JS files to be loaded first while downloading them asynchronously?
I want to perform asynchronous JavaScript downloads of two files that have dependencies attached to them.
// 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: How can I create an event to indicate when:
- jQuery is loaded?
- Google Maps is loaded
- jQuery and Google Maps are both 开发者_JAVA技巧loaded?
You can attach an event listener to the load
event on the <script>
elements you created to be informed when the objects have loaded.
This event listener can check to see which scripts are loaded, and call the appropriate functions itself.
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() { ... }
精彩评论