// =======================================================================
// 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.