6 Different Types of jQuery Document Ready Examples

These are the different types of Document Ready functions typically used in jQuery. If you want to run, execute any event in JavaScript you must put as soon as document gets ready. you should call it inside $(document).ready() function other wise event may not execute properly.

Following Code included inside $(document).ready() will only run only when the DOM(Document Object Model) is ready to execute JavaScript codes. It will be purely ready your page for javascript execution.

Here is the example of Different Types of jQuery Document Ready.

Document Ready Example-1:

$(document).ready(function(){ console.log("Document is Ready"); //Now DOM Ready Add DOM manipulating codes here.. });

Document Ready Example-2:

$(function(){ console.log("Document is Ready"); //Now DOM Ready Add DOM manipulating codes here.. });

The above both the codes are same the 1st on the the enhance version of second and more description.This enhanced version has a ready() function that you call in your code, to which you pass a JavaScript function.Once the DOM is ready, the JavaScript function get executed.

Document Ready Example-3:

jQuery.noConflict(); // Reverts '$' variable back to other JS librar jQuery(document).ready(function(){ console.log("Document is Ready"); //Now DOM Ready Add DOM manipulating codes here.. });

Adding the jQuery can help prevent conflicts with other JS frameworks.

Document Ready Example-4:

(function($) { 
 // code using $ as alias to jQuery
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library

This way you can embed a function inside a function that both use the $ as a jQuery alias.

Document Ready Example-5:

$(window).load(function(){ console.log('Ready for action..'); //initialize / ready after images are loaded });

Document Ready Example-6:

function DomReadyFun(){
  console.log("DOM is ready Now.");
}
 
$(document).ready(DomReadyFun);