A
axlq
OK, I'm writing a web app in which I'd like to display a "busy"
graphic while my scripts load. That's no problem. The page content
displays the graphic while a function triggered by window.onload
loads my scripts. That part works.
My problem is that when one script depends on another being loaded
first, I can't seem to control the ordering in which they load, and
I get an error.
This is HTML5, so the sync and defer attributes should be working.
Bare bones example, in which I load the Google Maps API followed by a
script that uses it, after the main body of the document is loaded:
=================================================================
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
<script>
function loadscript(url,sync,onload) { // load a javascript
var s;
s = document.createElement('script');
s.type = 'text/javascript';
s.src = url;
if (onload) s.onload = onload;
if (sync) s.async = 'async'; else s.defer = 'defer';
document.getElementsByTagName('head')[0].appendChild(s);
}
function loadstuff() {
loadscript('http://maps.google.com/maps/api/js?sensor=false',false);
loadscript('lib/mapops.js','js',false); // needs google maps
// ...etc...
}
if (window.addEventListener) window.addEventListener("load",loadstuff,false);
else if (window.attachEvent) window.attachEvent("onload",loadstuff);
</script>
</head>
<body>
body content here
</body>
</html
=================================================================
The above example generates
"Uncaught TypeError: undefined is not a function"
at this line in mapops.js:
var geocoder = new google.maps.Geocoder();
....which requires the Google Maps script to be loaded first. And it
should be loaded first. The above code sets async to false and defer to
true, so the scripts should be loaded in order.
If I load the scripts the traditional way, using <script> tags in the
document head, it works fine. But then I don't accomplish the effect
with the "busy while loading" graphic in the body.
Any suggestions or hints? I'm an experienced programmer, but
javascripts weird asynchronous behavior is bedeviling me.
Thanks.
-Alex
graphic while my scripts load. That's no problem. The page content
displays the graphic while a function triggered by window.onload
loads my scripts. That part works.
My problem is that when one script depends on another being loaded
first, I can't seem to control the ordering in which they load, and
I get an error.
This is HTML5, so the sync and defer attributes should be working.
Bare bones example, in which I load the Google Maps API followed by a
script that uses it, after the main body of the document is loaded:
=================================================================
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
<script>
function loadscript(url,sync,onload) { // load a javascript
var s;
s = document.createElement('script');
s.type = 'text/javascript';
s.src = url;
if (onload) s.onload = onload;
if (sync) s.async = 'async'; else s.defer = 'defer';
document.getElementsByTagName('head')[0].appendChild(s);
}
function loadstuff() {
loadscript('http://maps.google.com/maps/api/js?sensor=false',false);
loadscript('lib/mapops.js','js',false); // needs google maps
// ...etc...
}
if (window.addEventListener) window.addEventListener("load",loadstuff,false);
else if (window.attachEvent) window.attachEvent("onload",loadstuff);
</script>
</head>
<body>
body content here
</body>
</html
=================================================================
The above example generates
"Uncaught TypeError: undefined is not a function"
at this line in mapops.js:
var geocoder = new google.maps.Geocoder();
....which requires the Google Maps script to be loaded first. And it
should be loaded first. The above code sets async to false and defer to
true, so the scripts should be loaded in order.
If I load the scripts the traditional way, using <script> tags in the
document head, it works fine. But then I don't accomplish the effect
with the "busy while loading" graphic in the body.
Any suggestions or hints? I'm an experienced programmer, but
javascripts weird asynchronous behavior is bedeviling me.
Thanks.
-Alex
