Menu
I'm curious what situations exactly require the use of jquery's $(document).ready() or prototype's dom:loaded or any other variant of a handler for this event.
In all the browsers i've tested, it's entirely acceptable to begin interacting with html elements and the DOM immediately after the closing tag. (e.g.
<div id="myID">
My Div
</div>
<script type="text/javascript">
$('#myID').initializeElement();
</script>
So at this point i'm wondering whether $(document).ready() is merely there to reduce the thinking involved in writing javascript code that runs during page load. In the case of using $(document).ready() there is regularly rendering issues such as popping and 'artifacts' between the browser first starting to draw the page and the javascript actually executing when the page is 'ready'.
Are there any scenarios where $(document).ready() is required?
Are there any reasons I shouldn't be writing initialization scripts as demonstrated?
859
$( document ). ready()A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ). ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).
jQuery ready() Method The ready event occurs when the DOM (document object model) has been loaded. Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions. Like in the example above. The ready() method specifies what happens when a ready event occurs.
It is in no way required. All it does is make sure that the DOM is loaded before trying to query for and use the elements inside the DOM (usually after dom is ready and before body. onload fires). You can use jquery perfectly fine without it.
So technically it doesn't matter where you put it. Many people like putting script in the head, because it makes sure the script is read before the page is loaded. Other people like putting it at the very end (just before the end body tag) so that all of the elements of the page are loaded before the script reads them.
Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.
The $(document).ready() function has a ton of advantages over other ways of getting events to work. First of all, you don't have to put any "behavioral" markup in the HTML
With $(document).ready(), you can get your events to load or fire or whatever you want them to do before the window loads.
65
The main reason is external files that are included in the head. When you include a file in your <head> it gets run immediately. This means if the JavaScript interacts with the DOM it needs to be wrapped in Dom Ready.
It's also needed for unobtrusive JavaScript and separations of concerns. Ideally your JavaScript and HTML are in separate files. If you follow this you will not have any in-line script tags in your HTML at all.
The second is to defend yourself against obscure browser bugs when you make mistakes. There are cases where it's not save to go and manipulate DOM elements immediately afterwards. (I'm looking at you IE6!)
The third reason is to keep your code clean.
Mixing script tags into your HTML makes spaghetti code.
some HTML
<script> ... </script>
some HTML
<script> ... </script>
some HTML
<script> ... </script>
some HTML
<script> ... </script>
some HTML
<script> ... </script>
some HTML
<script> ... </script>
some HTML
<script> ... </script>
We have code about ten times worse then that. It's a right pain to read / maintain
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
