If scripts are loaded synchronously (incl. jQuery), then startup code I use is the following:

<script>
    $(window).load(function () {
        // some startup code
    });
</script>

Now scripts are deferred:

<script defer type="text/javascript" src="//cdnjs.cloudflare/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script defer type="text/javascript" src="...

How do I rewrite my startup code so it executes after deferred scripts are loaded and processed?

If scripts are loaded synchronously (incl. jQuery), then startup code I use is the following:

<script>
    $(window).load(function () {
        // some startup code
    });
</script>

Now scripts are deferred:

<script defer type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script defer type="text/javascript" src="...

How do I rewrite my startup code so it executes after deferred scripts are loaded and processed?

• javascript
• deferred

2 Answers 2

The approach I've used is to listen to the 'load' event of that specific script tag - once it's done and good to go, the event will fire.

theScript.addEventListener('load', function () {
    console.log(jQuery.fn.jquery);
});

<script defer id='theScript' type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/jquery/2.1.4/jquery.min.js"></script>

this of course is easier by simply adding an onload to the tag

<script defer src="foo.js" onload="callback()"></script>

Your callback can trigger an event. Theoretically you can use the DOMContentLoaded event but I've had some trouble with js not being fully available when this fires