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");
}); |
$(document).ready(function(){ console.log("Document is Ready"); });
Document Ready Example-2:
$(function(){
console.log("Document is Ready");
}); |
$(function(){ console.log("Document is Ready"); });
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();
jQuery(document).ready(function(){
console.log("Document is Ready");
}); |
jQuery.noConflict(); jQuery(document).ready(function(){ console.log("Document is Ready"); });
Adding the jQuery can help prevent conflicts with other JS frameworks.
Document Ready Example-4:
(function($) {
$(function() {
});
})(jQuery);
// other code using $ as an alias to the other library |
(function($) { $(function() { }); })(jQuery);
Credit: mycodingtricks
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..');
}); |
$(window).load(function(){ console.log('Ready for action..'); });
Document Ready Example-6:
function DomReadyFun(){
console.log("DOM is ready Now.");
}
$(document).ready(DomReadyFun); |
function DomReadyFun(){ console.log("DOM is ready Now."); } $(document).ready(DomReadyFun);
Related