Check when async javascript file is loaded

Question

I'd like to "bootstrap" my page only after all async files have been loaded. Is there a way I can be notified when an async file has been loaded?

index.html

<script src="fileone.js" type="text/javascript" async></script>
<script src="filetwo.js" type="text/javascript" async></script>
<script src="bootstrap.js" type="text/javascript" async></script>

Why don't you load them using javascript ? Appending this using JS allow you to use any event you wish — Dimitri Kopriwa, Dec 03 '15 at 21:16

score 9 · Answer 1 · answered Dec 03 '15 at 21:18

9

Giving one of your scripts an ID...

<script src='fileone.js' type='text/javascript' async id='script_1'></script>
<script>
    document.getElementById("script1").onload = script.onreadystatechange = function(){ alert("Script loaded!"); }
</script>

answered Dec 03 '15 at 21:18

MyUser

311
2
11

How does monitoring one script assure the others are loaded as well? – Jaromanda X Dec 03 '15 at 21:29
You would do one of those "document.getElementById()" lines for each script, replacing the "script1" with the other script ID. – MyUser Dec 03 '15 at 23:47

Check when async javascript file is loaded

1 Answers1

Linked