Skip to content

Instantly share code, notes, and snippets.

@hulbert

hulbert/edlio_loader.js

Last active December 24, 2015 13:19
Show Gist options
  • Save hulbert/6803715 to your computer and use it in GitHub Desktop.
Save hulbert/6803715 to your computer and use it in GitHub Desktop.
Download ZIP
IE8 async script loading issue
Raw
edlio_loader.js
/*
* Edlio script loader
*
* This is a basic asynchronous script loading that will *execute* the scripts
* loaded via the loader in order BUT does not guarantee that code included by other
* means will have access to these scripts. Generally that means for a feature
* or page that you should either load *everything* through this, OR have all
* the scripts be designed to work independently, OR have everything execute
* on DOM ready.
*
* Use is like: window.edlio.scriptLoader(['/path/to/script.js', '/pather/to/another.js']);
*
* This code is adapted from (which is available under an Apache 2.0 License):
* http://www.html5rocks.com/en/tutorials/speed/script-loading/#toc-aggressive-optimisation
*
*/
if (!window.edlio) window.edlio = {};
window.edlio.scriptLoader = function(scripts) {
if (scripts.length < 1) return;
var src;
var script;
var pendingScripts = [];
var firstScript = document.scripts[0];
// Watch scripts load in IE
function stateChange() {
// Execute as many scripts in order as we can
var pendingScript;
while (pendingScripts[0] && pendingScripts[0].readyState == 'loaded') {
pendingScript = pendingScripts.shift();
// avoid future loading events from this script (eg, if src changes)
pendingScript.onreadystatechange = null;
console.log(pendingScript.src);
// can't just appendChild, old IE bug if element isn't closed
firstScript.parentNode.insertBefore(pendingScript, firstScript);
}
}
// loop through our script urls
while (src = scripts.shift()) {
if ('async' in firstScript) { // modern browsers
script = document.createElement('script');
script.async = false;
script.src = src;
document.head.appendChild(script);
}
else if (firstScript.readyState) { // IE<10
// create a script and add it to our todo pile
script = document.createElement('script');
pendingScripts.push(script);
// listen for state changes
script.onreadystatechange = stateChange;
// must set src AFTER adding onreadystatechange listener
// else we’ll miss the loaded event for cached scripts
script.src = src;
}
else { // fall back to defer
document.write('<script src="' + src + '" defer></'+'script>');
}
}
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test case</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="/loader/js/common/edlio_loader.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
(function(){
var scripts = [];
scripts.push('/loader/js/jquery/1.8.3/jquery.js');
scripts.push('/loader/js/feedback/feedback_tab.js');
scripts.push('/loader/js/common/clickmenu.js');
scripts.push('/loader/js/profile_photo/jquery.Jcrop.js');
scripts.push('/loader/yui.js');
scripts.push('/loader/prototype.js');
scripts.push('/loader/js/jquery-ui/jquery-ui-1.10.2.-effects-core.js');
scripts.push('/loader/js/profile_photo/jquery.transit.js');
scripts.push('/loader/js/components/simpledropdown.js');
scripts.push('/loader/dojo.js.uncompressed.js');
scripts.push('/loader/done.js')
window.edlio.scriptLoader(scripts);
})();
</script>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment