asynchronous - Javascript: Is there any way to detect when all async scripts have loaded? -

if use plain script tags on html page, rendering blocked until script has been downloaded , parsed. avoid that, faster page display, can add 'async' attribute, tells browser continue processing down page without waiting script. however, inherently means other javascript refers in script crash, because objects requires don't exist yet.

as far know, there's no allscriptsloaded event can tie into, i'm looking ways simulate one.

i'm aware of following strategies defer running other code until async script available:

• for single script, use 'onload' event or attribute. however, there's no built-in way know of tell when scripts have loaded if there's more one.
• run dependent code in onload event handlers attached window. however, wait images too, not scripts, run later ideal.
• use loader library load scripts; typically provide callback run when has loaded. downside (besides needing library this, has load early), code has wrapped in (typically anonymous) function pass loader library. that's opposed creating function runs when mythical allscriptsloaded fires.

am missing something, or state of art?

the best hope know if there outstanding async calls (xmlhttprequest, settimeout, setinterval, setimmediate, process.nexttick, promise), , wait there not one. however, implementation detail lost underlying native code--javascript has own event loop, , async calls passed off native code, if understand correctly. on top of that, don't have access event loop. can insert, can't read or control flow (unless you're in io.js , feeling frisky).

the way simulate 1 track script calls yourself, , call after script complete. (i.e., track every time insert relevant script event loop.)

but yeah, dom doesn't provide noasyncpending global or something, you'd require.