On-demand JavaScript - How to know when the functions are available?

[JAB Creations]

I've been trying to slim down my site's initial JavaScript file size by removing optional functions. The problem with the non-AJAX version is that I have no clue how to elegantly determine when the function has become available. When creating the script element I can't simply presume the file was successfully downloaded from the client. The only thing I can think of is to run a limited loop to keep checking for the function name's typeof which is something I'd prefer to find an alternative solution for. Here is the basic non-AJAX version of the on-demand JavaScript...

//Step 1:
var js=document.createElement('script');
js.src=url;
js.type='text/javascript';
var newtext = document.createTextNode('\n');
document.getElementsByTagName('head')[0].insertBefore(js,document.getElementsByTagName('script')[1]);
document.getElementsByTagName('head')[0].insertBefore(newtext,document.getElementsByTagName('script')[2]);
// Step 2: Determine if/when function is available, then call it?
// Step 3: Profit!

...or if someone would be so kind as to demonstrate on-demand JavaScript via AJAX that dynamically imports all the functions from the server's response that would be awesome too.

- John

[Little_G]

Hi,

Have you tried using the onload event of your new script element? You should be able to call your imported functions inside that and guarantee that they will exist.

Andrew

[JAB Creations]

Hi Andrew,

What I am doing in example is not loading the JavaScript until the user loads content in a layer via AJAX. Those layers tend to be around 1-10KB tops so even on dial-up a 4KB JavaScript file wouldn't force the user to wait more then two or three seconds. In other words I would not be loading on-demand scripts during the onload event though on an event that correlates to content that will be requested and displayed via AJAX. Once the script is loaded I would then execute the AJAX request dependent on the script that I need to load on-demand.

A 4KB chunk of JavaScript removed here and a 3KB chunk of JavaScript removed there and I can reduce the initial load time for the main JavaScript by three or four seconds even after compression. The load time is currently about 12 seconds on a 36K modem (5,400 kilobytes per second) with most pages being about 1-2KB, three seconds for the styling, and the rest for my JavaScript hence why I'm trying to load it on-demand.

I would prefer to do this through AJAX in order to take advantage of readyState though I haven't seen any examples that import all of the functions dynamically; I've only seen function names declared statically and I would prefer to have the functions loaded without having to manually set the names of the functions in the AJAX script. That is why I'm considering using typeof inside of a limited loop to check and see if the JavaScript file has finished loading and has become available to the client.

- John

[Little_G]

Hi,

The purpose of Ajax is to load data asynchronously in the background, it's more of a concept than an implementation. The example you used in your first post does exactly that, loads the script in the background after the page has already been loaded. This, as far as I'm concerned is an 'Ajax' solution. The other alternative is to download the code using XMLHttpRequest and run it though eval [developer.mozilla.org], though I believe this has a performance hit.
On the subject of onload, what I was suggesting was to use something like this:

var js=document.createElement('script');
js.src=url;
js.type='text/javascript';
[b]js.onload = function(){
   //functions are loaded.
}[/b]
var newtext = document.createTextNode('\n');
document.getElementsByTagName('head')[0].insertBefore(js,document.getElementsByTagName('script')[1]);
document.getElementsByTagName('head')[0].insertBefore(newtext,document.getElementsByTagName('script')[2]);

There is also a third option which is to use a callback, so the JavaScript you loaded would have a function call at the end of the script, this would be called when the script was loaded notifying you loading was complete.

There's always more than one way with JavaScript!

Andrew