Noob to jQuery -- learning about $(document).ready(function () { })

Forum Moderators: open

Message Too Old, No Replies

Noob to jQuery -- learning about $(document).ready(function () { })

csdude55

3:56 am on Feb 20, 2016 (gmt 0)

It's my understanding now (thanks to Fotiman) that $(document).ready(function () makes sure that the document is ready before processing the function.

So for the sake of clarification, are these two the same? Or does the first run when it hits the opening <body> where the second doesn't run until it hits the closing </body>?

// Example 1
<script>
function defaultFunc() {
 if (document.getElementById('whatever')
  document.getElementById('whatever').innerHTML = 'test';
}
</script>

<body onLoad='defaultFunc()'>

<div id='whatever'></div>

</body>

// Example 2
<script>
$(document).ready(function ()
 if ($('#whatever'))
  $('#whatever').html('test');
});
</script>

<body>

<div id='whatever'></div>

</body>

Fotiman

4:12 am on Feb 20, 2016 (gmt 0)

They are not quite the same. The body onload event is fired after EVERYTHING has finished loading, meaning all images have finished downloading as well. Generally, you don't want to wait for all images to be loaded, you want to wait for the DOM to be ready (which happens before all images have loaded).

Also, using inline event handlers is strongly discouraged. The markup is for you content, while the behavior belongs in JavaScript. Additionally, if you are going to use inline event handlers, don't use camelCase attributes like onLoad, onClick, etc. Instead, use all lowercase attributes like onload, onclick, etc. But you're better off avoiding inline handlers altogether.

csdude55

4:22 am on Feb 20, 2016 (gmt 0)

OK, cool. My old code used the onLoad function, and it sounds like the first script will be better. I'm thinking that Example 1 might be closer to using $(window).ready(function () instead of $(document).ready(function ().

While we're on the subject, is this acceptable?

// Example 3
<script>
$(document).ready(function ()
 if ($('#whatever'))
 $('#whatever').html(var_1);
});

var var_1 = 'test';
</script>

<body>

<div id='whatever'></div>

</body>

Understanding that the $(document).ready(function() wouldn't run until the DOM has fully loaded, then even though it's out of sync, would var_1 be defined before the function runs?

By "acceptable", I mean would it work without logic errors. I think it's kind of sloppy myself and easy to get lost, but I have a lot of dynamic pages where it's only possible to define a variable later in the page. If this is OK then I could eliminate several functions.

Fotiman

1:29 pm on Feb 20, 2016 (gmt 0)

In that example, yes, var_1 would be defined before the function runs. Generally, though, you should avoid global variables if at all possible. Also, it's generally considered best practice to put scripts in external files, and include them just before the closing </body> tag. It's better for performance, and also you don't need to worry about $(document).ready in that case, because the DOM is going to be loaded at that point.

Fotiman

1:33 pm on Feb 20, 2016 (gmt 0)

Also, this will always equate to true:

if ($('#whatever'))

The result of calling the jQuery method is always a jQuery object. You would want to get the "length" property instead:

if ($('#whatever').length)