Load jquery asynchronously before other scripts
I'd like to run jQuery with async attrib and run other few external scripts asynchronously only after jquery is loaded.
What does that mean? It sounds a lot like you want to load jQuery first, then other things when it's done. So you want to load it synchronously. If you still want to use the async
way, you could define an onload
function to continue loading other things once jQuery is ready. Or you could use defer
. Both of these are explained here: https://davidwalsh.name/html5-async
This is a great use-case for defer
:
<script defer src="jquery.js"></script>
<script defer src="custom.js"></script>
Neither of these tags will block rendering. The browser can download jquery.js
and custom.js
in parallel. It will execute jquery.js
as soon as it has been downloaded and the DOM has been loaded, and custom.js
will execute afterwards.
Sadly, there a few issues:
- You can't use the
defer
attribute for inline scripts. - IE < 10 has been documented to cause scripts with
defer
to unexpectedly interleave their execution. - I can't find any specs that say that scripts with the
defer
order are meant to be executed in order, just that they are meant to be executed after the DOM loads.