{"id":201,"date":"2021-03-21T11:44:34","date_gmt":"2021-03-21T11:44:34","guid":{"rendered":"https:\/\/wshop.fi\/eng\/?p=201"},"modified":"2021-03-21T11:44:35","modified_gmt":"2021-03-21T11:44:35","slug":"jquery-document-ready-explained-document-ready-function","status":"publish","type":"post","link":"https:\/\/wshop.fi\/eng\/jquery-document-ready-explained-document-ready-function\/","title":{"rendered":"jQuery Document Ready Explained: $(document).ready() Function"},"content":{"rendered":"\n

jQuery $(document).ready() is a basic part of using jQuery. The jQuery document ready function executes when the DOM (Document Object Model) is completely loaded in the browser. jQuery document ready is used to initialize jQuery\/JavaScript code after the DOM is ready, and is used most times when working with jQuery.<\/strong> <\/p>\n\n\n\n

The Javascript\/jQuery code inside the $(document).ready() function will load after the DOM is loaded, yet before the page contents load. This is important for \u201cevents\u201d to work correctly. Using $(document).ready(), your events can happen before the window loads.<\/p>\n\n\n\n

<script type='text\/javascript' src='https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.js '><\/script><\/code><\/pre>\n\n\n\n
jQuery Document Ready Snippet<\/h2>\n\n\n\n
$(document).ready(function() {\n  \/\/ Put javascript here\n});<\/code><\/pre>\n\n\n\n
*jQuery document ready can be used multiple times per document, although it\u2019s not a best practice.
*You must reference external stylesheets before referencing the scripts that depend on the value of CSS style properties.<\/em><\/p>\n\n\n\n
jQuery Document Ready Shorthand Snippet<\/h2>\n\n\n\n
$(function(){\n  \/\/ Put javascript here\n});<\/code><\/pre>\n\n\n\n
4 Other ways to write jQuery Document Ready:<\/h2>\n\n\n\n
They achieve the same result.<\/p>\n\n\n\n
$(document).ready(function() { ... });\n$(function() { ... });\njQuery(document).ready(function() { ... });\njQuery(function() { ... });<\/code><\/pre>\n\n\n\n
jQuery Document Ready with noConflict – fix \u201c$ is not defined\u201d error<\/h2>\n\n\n\n
Call $.noConflict() to avoid namespace difficulties ($ shortcut is no longer available). Why? Ever receive the\u00a0\u201c$ is not defined\u201d<\/strong>\u00a0error (perhaps when using\u00a0WordPress<\/strong>)? Basically, replace \u201c$\u201d with \u201cjQuery\u201d when you receive the error, \u201c$ is not defined.\u201d<\/p>\n\n\n\n
jQuery.noConflict(); \/\/ Reverts '$' variable back to other JavaScript libraries, avoiding namespace difficulties\njQuery(document).ready( function(){\n   \/\/ Put javascript here to when DOM is ready with no conflicts\n}); <\/code><\/pre>\n\n\n\n
jQuery\u2019s Document Ready vs. Window load<\/h2>\n\n\n\n
jQuery\u2019s document ready is similar to JavaScript\u2019s \u201cload\u201d function, but it doesn\u2019t trigger until after assets such as images are received.<\/p>\n\n\n\n
Why use $(window).load()?<\/strong><\/p>\n\n\n\n
To manipulate pictures use the window load function instead of $(document).ready() because it will wait until the images finish loading. Then you should initialize the jQuery alignment function.<\/p>\n\n\n\n
$(window).load(function(){ \n     \/\/initialize after images load \n}); <\/code><\/pre>\n\n\n\n
jQuery $(document).ready() Key Points<\/h2>\n\n\n\n
  • First download or link to Googles CDN (https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.js)<\/li>
  • Used to execute JavaScript when the DOM is completely loaded. Put event handlers here.<\/li>
  • Can be used multiple times.<\/li>
  • Replace \u201c$\u201d with \u201cjQuery\u201d when you receive \u201c$ is not defined.\u201d<\/li>
  • NOT used if you want to manipulate images
    • Use $(window).load() instead.<\/li><\/ul><\/li><\/ul>\n\n\n\n
      jQuery $(document).ready() Example<\/h2>\n\n\n\n
      <!DOCTYPE html>\n<html>\n<head>\n  <style>\n      p { color:red; }\n  <\/style>\n  <script src=\"http:\/\/code.jquery.com\/jquery-latest.js\"><\/script>\n  <script>\n  $(document).ready(function () {\n      alert('DOM is loaded.'); \/\/  This alert happens immediatley when the DOM is ready, but before the next line alters it.(So it wont look instantaneous.)\n      $(\"p\").text(\"The DOM is \").append(\"<span style='color:black;'>now loaded,<\/span>\").append(\" thus can be manipulated.\");\/\/ append is used due to some issues with javascript concatenation and web-kit Chrome\/Safari\n  });\n  <\/script>\n<\/head>\n<body>\n \n \n<p>Not loaded yet.<\/p>\n<p>\n \n<p>\n<\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
      jQuery $(document).ready() is a basic part of using jQuery. The jQuery document ready function executes when the DOM (Document Object Model) is completely loaded in the browser. jQuery document ready is used to initialize jQuery\/JavaScript code after the DOM is ready, and is used most times when working with jQuery. The Javascript\/jQuery code inside the […]<\/p>\n","protected":false},"author":1,"featured_media":203,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":{"0":"post-201","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-coding"},"_links":{"self":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":2,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"predecessor-version":[{"id":204,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/201\/revisions\/204"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media\/203"}],"wp:attachment":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}