What Javascript event fires when async resources are finished loading?

Question

If I load a script asynchronously like this

<script type="text/javascript">
    (function () {
        var js = document.createElement('script');
        js.type = 'text/javascript';
        js.async = true;
        js.src = '<%=BundleTable.ResolveUrl("~/js") %>';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(js, s);
    })();
</script>

what event fires once the async stuff is finished loading and the dom is finished loading?

`jQuery(function($){$.getScript('...url...', function(){...callback...});});` is so much simpler... — zzzzBov, Sep 29 '11 at 04:51
You would want to do `js.onload = function() {}` there. See here for more info: http://stackoverflow.com/a/28002292/1329367 — Mahn, Apr 28 '15 at 17:21

score 2 · Accepted Answer · edited May 23 '17 at 12:16

Every event has it's own notification mechanism so there is no generic answer. For example, you can read about how to detect when a dynamically loaded script is done loading here and here. These days, you can save yourself a ton of time by using a good framework like YUI or jQuery as they most have built-in cross-browser support for these types of events.

For the DOM finished loading, there is no single cross-browser mechanism that gets you the earliest possible time when it's finished loading. If you look at a jQuery implementation of $(document).ready(), you will see several techniques employed (listening for "DOMContentLoaded" event, the earliest time that a setTimeout() will fire, listening for window load(), document onreadystatechange event, etc...) in order to support this functionality cross browser.

The window.onload event will guarentee safe DOM access, but it also waits for all images to finish loading which is much later than neccessary. These other techniques are used to get earlier safe access.

What Javascript event fires when async resources are finished loading?

1 Answers1

Linked