loadScripts Different Domain

Race Conditions:	Normal Script Src XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag
Single script:	Hardcoded Callback Window Onload Timer Script Onload Degrading Script Tags
Multiple scripts:	Managed XHR DOM Element and Doc Write
General solution:	loadScript loadScripts Same Domain loadScripts Diff Domain YUI Loader

Examples ▼

Was the script loaded without blocking?
Was execution order preserved?

This page contains two external scripts (menu.js and menutier.js) and some inlined code. The scripts have cascading dependencies: the inlined script depends on menutier.js, and menutier.js depends on menu.js. Because of these dependencies, if we load the scripts asynchronously, we have to preserve the execution order of the external scripts as well as the inlined script.

This example demonstrates the general solution for loading multiple, interdependent scripts that are on a different domain than the main page: EFWS.Script.loadScripts. This function uses the Script DOM Element or document.write Script Tag technique (depending on the browser) for loading the script asynchronously. The coupling technique used depends on how the script is loaded: Script Onload is used with Script DOM Element while Window Onload is used with document.write Script Tag. All of this in wrapped into a one-line call:

EFWS.Script.loadScripts( ["http://souders.org/efws/menu.js", "http://souders.org/efws/menutier.js"], init);

This technique improves script loading in all browsers, except Safari 3 and Chrome 1. In some browsers, the loading of other resources is not possible, because of browser limitations. Whenever possible, it's better to combine your scripts into a single script, and load them using the simpler loadScript function.