jQuery document ready

// =======================================================================
//             Document Ready Example 1
// =======================================================================

$(document).ready(function () {
  // do jQuery stuff when DOM is ready
});

// =======================================================================
//             Document Ready Example 2
// =======================================================================

$(function() {
  // jQuery code here
  // This is equivalent to example 1 they literally mean the same thing.
});

// =======================================================================
//             Document Ready Example 3
// =======================================================================

jQuery(document).ready(function ($) {
  // do jQuery stuff when DOM is ready
});

// Adding the jQuery can help prevent conflicts with other JS frameworks.
// 
// Why do conflicts happen?
// Conflicts typically happen because many JavaScript Libraries/Frameworks use the same shortcut
// name which is the dollar symbol $. Then if they have the same named functions the browser gets
// confused!
// 
// How do we prevent conflicts?
// Well, to prevent conflicts i recommend aliasing the jQuery namespace (ie by using example 3 above).
// Then when you call $.noConflict() to avoid namespace difficulties (as the $ shortcut is no longer available)
// we are forcing it to wrtie jQuery each time it is required.

jQuery.noConflict(); // Reverts '$' variable back to other JS libraries
jQuery(document).ready(function () {
  // do jQuery stuff when DOM is ready with no conflicts
});

// =======================================================================
//               Document Ready Example 4
// =======================================================================

$(window).load(function () {
  //initialize after images are loaded
});

// Sometimes you want to manipulate pictures and with $(document).ready() you won't be able to do that
// if the visitor doesn't have the image already loaded. In which case you need to initialize the
// jQuery alignment function when the image finishes loading.