Question

I am using the following code snippet to load a javascript asynchronously, in a non-blocking manner. It works across Chrome, FF but fails to work in Internet Explorer.

I am running IE8 and can’t hit the onload function in IE for the below code;

          <script type="text/javascript">
            (function () {
                var s = document.createElement('script');
                s.type = 'text/javascript';
                s.async = true;
                s.src = 'js/load_outer.js';
                s.onload = function () {
                    alert("Loaded");
                }

                var x = document.getElementsByTagName('script')[0];
                x.parentNode.insertBefore(s, x);
            })();
        </script>

Could anyone please help me identify the mistake?

Thanks

Answer 1

IE (earlier than 9) doesn’t support onload event for <script> element, use onreadystatechange instead:

var complete = false;
script.onload = script.onreadystatechange = function() {
    if (!complete && (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')) {
        complete = true;
        // your callback code here
    }
}