I would like to remove my jQuery and I need to replace $(function() { ... });
with something similar. I have seen people use the new HTML property defer
but they use it to call another script rather than calling codes in the the same HTML source. How can I use defer
to implement the same ready
feature in my HTML code without calling another script?
<div style="margin-top: 100px">.</div>
<div>AAAA</div>
<script defer>alert('hi')</script>
<div>BBBB</div>
CodePudding user response:
You basically have three standard options at your disposal, two being explicit, and one being implicit and relying on how the browser parses the document (top-down, element by element):
defer
. Adding thedefer
attribute to a script tag results in the script execution being delayed until immediately beforeDOMContentLoaded
would fire (when the DOM is parsed), and makes sureDOMContentLoaded
doesn't actually fire before the full script has been executed. Please note thatdefer
must not be used when thesrc
attribute is missing (that is, it's only available for external scripts).DOMContentLoaded
listener (orreadyStateChange
listener if you enjoy complicating things).- Adding your
script
tag right before the closing</body>
tag.
Please note that scripts that have type="module"
are automatically deferred.
Personally, I stopped using jQuery around 2015, and since that, have been working with DOMContentLoaded
ever since, with not a single issue in all those years.