Happy New Year

document-ready

$(document).ready()

Whenever you use jQuery to manipulate your web page, you wait until the document ready event has fired. The document ready event signals that the DOM of the page is now ready, so you can manipulate it without worrying that parts of the DOM has not yet been created. The document ready event fires before all images etc. are loaded, but after the whole DOM itself is ready.

Here is a jQuery document ready listener example:

$(document).ready(function(){
  console.log("ready!");
});

Experienced developers sometimes use the shorthand $() for $(document ).ready(). If you are writing code that people who aren't experienced with jQuery may see, it's best to use the long form.

$(function() {
  console.log("ready!");
});

You can also pass a named function to $(document).ready() instead of passing an anonymous function.

function readyFn(jQuery){
  alert("document is ready");
}
$(document).ready(readyFn);
// or:
$(window).on(load", readyFn );

The example below shows $(document).ready() and $(window).on("load") in action. The code tries to load a website URL in an <iframe> and checks for both events:

<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js" > </script>
<script>
$(document).ready(function() {
  console.log("document loaded");
});
$(window).on("load",function() {
  console.log("window loaded");
});

<html>