Javascript Deferred Functions

Question

I've been looking around at JavaScript to try and get some code to load asynchronously

I found this code sample

<script type="text/javascript">
function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "defer.js";
   document.body.appendChild(element);
}
if (window.addEventListener) {
   window.addEventListener("load", downloadJSAtOnload, false);
}
else if (window.attachEvent) {
   window.attachEvent("onload", downloadJSAtOnload);
}
else {
   window.onload = downloadJSAtOnload;
}
</script>

from http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

The thing is it doesn't quite do what I'm trying to achieve. I would like to be able to do something similar but setup a deferred or some type of function that is called after this has all loaded. Is that possible? If so can anyone help explain how?

It isn't clear what you are trying to achieve. It seems like you wish to dynamically load some JavaScript into your page. I'm not sure that is even legal. What is the intent of your logic? — Kolban, Nov 04 '14 at 02:04
this was in reference to google pagespeed telling you to eliminate render blocking js above the fold. — steffan, Nov 04 '14 at 02:39
Yeah, that just means move your JS to the bottom of your page. [You should check this out, has a bunch of good resources on the subject.](http://browserdiet.com/en/) — AlbertEngelB, Nov 04 '14 at 22:50

score 2 · Accepted Answer · edited May 23 '17 at 10:28

You can try to use the onload event of the script tags you are loading. See this question, for example: Trying to fire the onload event on script tag. However, this mechanism seems pretty sketchy and may not be cross-browser.

Another possible approach is to have the script that is being loaded trigger an event that can be handled by the existing javascript on the page. This may or may not make sense for your particular case, and it requires you to have control over the loaded script.

Finally, these days it's rare for javascript loading to be a performance bottleneck for your website. So why are you trying to dynamically load javascript? Could you solve the same problem by loading some other resource, e.g. by doing an AJAX request?

this was in reference to google pagespeed telling you to eliminate render blocking js above the fold. I've stripped the css & js into two categories, required for page presentation and not required. Maybe I can do ajax to load the not required stuff after the page has been fully loaded. Thanks for the hint i'll go check into ajax. — steffan, Nov 04 '14 at 02:41

score 0 · Answer 2 · edited May 23 '17 at 12:31

You've tagged jQuery on your question. It has $.getScript() which does exactly what you're asking for in a purely cross browser fashion. It will load the script asynchronously and then call the specified callback when the script has finished loading and initializing:

$.getScript("defer.js", function() {
    // script loaded here
    // you can run code here that uses that script
});

If you really want to wait until the DOM is loaded before loading this script (generally not necessary), you could do this:

$(document).ready(function() {
    $.getScript("defer.js", function() {
        // script loaded here
        // you can run code here that uses that script
    });
});

Or, to wait until ALL other resources are loaded including images:

$(window).load(function() {
    $.getScript("defer.js", function() {
        // script loaded here
        // you can run code here that uses that script
    });
});

If you're interested in some references on when scripts are loaded (particularly with defer and async attributes, you can read this detailed post.

Javascript Deferred Functions

2 Answers2