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

Couple document.write Script Tag

Examples ▼

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

This page contains an external script and some inlined code. The external script is loaded asynchronously (using the Script DOM Element technique). The inlined code's init function calls scriptAFunc, a function defined in the external script. Because of this dependency, the inlined code must be coupled with the external script so that the execution order is preserved: the external script is loaded, parsed, and executed before the inlined code.

In this example, the scripts are loaded using document.write to write the SCRIPT tags into the page.

document.write('<scr' + 'ipt src="A.js" type="text/javascript"></scr' + 'ipt>');
document.write('<scr' + 'ipt src="B.js" type="text/javascript"></scr' + 'ipt>');

This technique successfully loads scripts in parallel in IE, Safari 4, and Opera, and it preserves execution order. But it has some drawbacks. Although scripts are loaded in parallel, in IE and Opera other types of resources (images, stylesheets, etc.) are blocked from downloading, and elements in the page below the scripts are blocked from rendering.