How to check if document is ready (all js files loaded, DOM is ready) through jQuery? Is there any flag?
Facing issues if some of the files are not downloaded completely, and the event is raised by user. I want to check inside event handler.
I am using jQuery, asp.net
Source: Tips4all
This isn't documented, I don't think, but if you look at the jQuery code for $(document).ready:
ReplyDelete// If the DOM is already ready
if ( jQuery.isReady ) {
// Execute the function immediately
fn.call( document, jQuery );
} // ...
Thus, for a way that may change, you can use $.isReady or jQuery.isReady.
A better way would be to use $(document).ready in line. e.g.:
function myClickHandler(event) {
// do stuff
$(document).ready(function() {
// Do this immediately if DOM is loaded, or once it's loaded otherwise.
}
}
Essentially, this uses the ready function as a guard. Instead of an if statement, you use the ready function. Of course, the ready function has the behavior that it will run once the DOM is loaded. If your behavior is only wanting something to happen if it's loaded, but never doing it if the DOM isn't loaded yet, then using the flag above, or setting your own, is the better way to go. Setting your own:
$(document).ready(function() {
window.domIsReady = true;
}
if (window.domIsReady) {
// do stuff
}
Creating your own is probably better, since jQuery.isReady doesn't seem to be documented, and therefore probably isn't supported and may be changed at any time.
Is this a trick question? :)
ReplyDeleteWhat you're looking for is document.ready
Example:
$(document).ready(function() {
alert ("document is ready!");
});
$(document).ready(function() {
ReplyDelete// Handler for .ready() called.
});
A simple function call to see if the base is even loaded.
ReplyDeletejQuery(document).ready(function(){
alert("howdy");
});
alternative, find out if it is loaded (better)
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
alert('not loaded');
}
</script>
FOR THE SHORT NUTS OUT THERE: (no typeof needed :)
<script type="text/javascript">
if(!this.$)
{
alert('not loaded');
}
</script>
http://api.jquery.com/ready/ - example as at the bottom of the page
ReplyDeleteJquery has this:
ReplyDelete$(document).ready(function(){
alert('document ready here')
});
It's become fairly common practice to wrap any jquery that manipulates the DOM in a $(document).ready() block, to ensure the DOM is all there before proceeding.
Thought the document.ready code was only triggered when the document and all files where loaded. Never had problems with that myself.
ReplyDeleteIf I had the problem, I would either place a var in all files needed and check if they add up, place all code in one file.
Forgive me for not posting a definitive answer
Are you looking for the native window.onload event by any chance? It's fired when everything on the page (including scripts, images, stylesheets) have loaded.
ReplyDeletefunction doStuff() {
alert("The DOM and everything inside have loaded");
}
window.onload = doStuff;
See also: addLoadEvent.