This demonstrates a few ways that a blocking non-async
script
can listen for an async
script to load:
(window.myLib = window.myLib || []).push(callback)
.
onload
event handler attribute on the
script[async]
. Not ideal since it requires
'unsafe-hashes'
for CSP.
load
event listener to the
script[async]
which has a defined id
. Ideal,
as long as we can be sure that the script[async]
will not
finish loading before
the subsequent inline blocking
script with script.addEventListener('load', ...)
can
run.readystatechange
event until
document.readyState === 'complete'
. The downside here is it
waits for all async scripts and other assets to have downloaded
(so similar to the load
event on window
).
load
event on the window. (Worse than
readystatechange
.)
setInterval
. (The worst).MutationObserver
to listen for subsquent parsing of
the script[async]
and adding the load
event
via addEventListener
. This also works for
blocking scripts! (Props to
Noam Rosenthal
for this approach.)
load
event listener on the
document.documentElement
with the
capture
option (aka
useCapture
) set to true
. The best?
Did I miss anything?