javascript - How to run a script once error handlers for all script tags have finished? -
i have few resources load defer
cdn, so:
<script src="js/sri-fallback.js"></script> <script defer src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-ccuebr6csya4/9szppfrx3s49m9vuu5bgtijj06wt/s=" data-fallback="js/jquery.min.js" crossorigin="anonymous" onerror="resource_error(this)"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer data-fallback="js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous" onerror="resource_error(this)"></script> <script src="js/do_jquery_stuff.js" defer></script>
sri-fallback.js
script trying use automatically handle failure when loading cdn (such incorrect hash or cdn being down). looks this:
function resource_error(element) { var fallback_url = element.dataset.fallback; var script = document.createelement('script'); script.src = fallback_url; document.head.appendchild(script); }
this works, problem resources loaded in order:
- jquery via cdn (fails)
- bootstrap via cdn (fails)
- do_jquery_stuff.js (succeeds)
- jquery locally (succeeds)
- bootstrap locally (succeeds)
this means do_jquery_stuff.js
fails because depends on jquery, not loaded when runs.
how can run do_jquery_stuff.js
when scripts have loaded?
as you're handling failure of loading file own js, think solution here make do_jquery_stuff.js
runned dynamically, after checked scripts have been loaded.
one solution see, bind onload
event on each of deferred scripts new function of sri-fallback.js
. way, you'll able know scripts have succeeded, have failed, , you'll know when every of them succeed. you'll have count how many scripts have loaded.
once know every script has been loaded successfully, append do_jquery_stuff.js
page dynamically.
Comments
Post a Comment