Here we will learn different types DOM ready functions used in jQuery and javaScript. It's very important to know that when and where should we use them. Here we will explain why one should choose version accordingly. Document ready function is a self-executing function that runs after the web page elements have loaded.

Document Ready Type 1

$(document).ready(function() {
    //here we can write the stuff in jQuery when DOM is ready
   alert(DOM is ready type 1);	
});

A named function can also be passed to $(document).ready() inplace of an anonymous function.

function testDOM_fun(){
  // code inside the function
}

$(document).ready(testDOM_fun);

var testDOM_fun = function() {
     alert(DOM is ready type 1);	
 };


$(testDOM_fun);

Document Ready Type 2

$(function(){ 
	//here we can write the stuff in jQuery when DOM is ready
	alert(DOM is ready type 2);	
});

Here jQuery’s “$” function is given a call and document object is passed to it and the object's enhanced version is returned by the $ function.

The returned object has a ready() function that we have called in type 1 and passed an anonymous function to it.

Document Ready Type 3

jQuery(document).ready(function($) {
	alert(DOM is ready type 3);
});

Here we added jQuery instead of $, this helps in preventing the conflicts with other JS frameworks.

Document Ready Type 4

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

In this way, we can embed one function inside another function where both use $ instead of jQuery.

Document Ready Type 5

$(window).load(function(){  
	//Initialized once images are loaded completely  
   });

When we want to manipulate images and with $(document).ready() we will not be able to manipulate images as the visitor don't have the pictures already loaded then we use type 5.