{"id":7170,"date":"2015-09-28T12:15:57","date_gmt":"2015-09-28T09:15:57","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=7170"},"modified":"2017-12-21T16:13:30","modified_gmt":"2017-12-21T14:13:30","slug":"jquery-document-ready-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/","title":{"rendered":"jQuery Document Ready Example"},"content":{"rendered":"<p>In this example, we&#8217;ll have a look into jQuery <code>$( document ).ready()<\/code>. This is the starting point of almost all of our jQuery code, so there stands a reason why developers should have a clear understanding why it is used and how important it is.<\/p>\n<p>Whenever you use jQuery to manipulate your web page, you wait until the document ready event has fired.<\/p>\n<p>The document ready event signals that the DOM of the page is now ready, so you can manipulate it without worrying that parts of the DOM has not yet been created. The document ready event fires before all images etc. are loaded, but after the whole DOM itself is ready.<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;qGGDqWnle19VavkM&#8217;]<\/p>\n<h2>1. Document Setup and Basic Application<\/h2>\n<p>To begin, create a new HTML document and add the basic syntax and links in it like so:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;jQuery Document Ready Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;!-- JAVA\r\nSCRIPT SECTION  --&gt;\r\n&lt;script src=\"jquery-1.11.3.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h3><strong>Document Ready Application<\/strong><\/h3>\n<p>A page can&#8217;t be manipulated safely until the document is &#8220;ready.&#8221; jQuery detects this state of readiness for you. Code included inside <code>$( document ).ready()<\/code> will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside <code>$( window ).load(function() { ... })<\/code> will run once the entire page (images or iframes), not just the DOM, is ready.<\/p>\n<pre class=\"brush:java\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\n    $(document).ready(function() {\r\n    \/\/do jQuery stuff when DOM is ready\r\n    });\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Experienced developers sometimes use the shorthand <code>$()<\/code> for <code>$( document ).ready()<\/code>. If you are writing code that people who aren&#8217;t experienced with jQuery may see, it&#8217;s best to use the long form.<\/p>\n<pre class=\"brush:java\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(function(){ \r\n\t\/\/jQuery code here \r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Both snippets literally mean the same thing.<\/p>\n<h2>2. Types of Document Ready<\/h2>\n<p>These are the different types of Document Ready functions typically used in jQuery (a.k.a jQuery DOM Ready). A lot of developers seem to use them without really knowing why. So we will try to explain why you might choose one version over another. Think of the document ready function as a self-executing function which fires after the page elements have loaded.<\/p>\n<h3>2.1 Document Ready Example 1<\/h3>\n<pre class=\"brush:java\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\njQuery(document).ready(function($) {\r\n\t\/\/do jQuery stuff when DOM is ready\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Adding the jQuery can help prevent conflicts with other JS frameworks.<\/p>\n<h4><strong>Why do conflicts happen?<\/strong><\/h4>\n<p>Conflicts typically happen because many JavaScript Libraries\/Frameworks use the same shortcut<br \/>\nname which is the dollar symbol $. Then if they have the same named functions the browser gets<br \/>\nconfused!<\/p>\n<h4><strong>How do we prevent conflicts?<\/strong><\/h4>\n<p>Well, to prevent conflicts i recommend aliasing the jQuery namespace (ie by using example 3 above).<\/p>\n<p>Then when you call <code>$.noConflict()<\/code> to avoid namespace difficulties (as the $ shortcut is no longer available) we are forcing it to wrtie jQuery each time it is required.<\/p>\n<pre class=\"brush:java\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\njQuery.noConflict(); \/\/ Reverts '$' variable back to other JS libraries\r\njQuery(document).ready( function(){ \r\n         \/\/do jQuery stuff when DOM is ready with no conflicts\r\n   });  \r\n\r\n\/\/or the self executing function way\r\n jQuery.noConflict();\r\n (function($) { \r\n    \/\/ code using $ as alias to jQuery\r\n})(jQuery);\r\n&lt;\/script&gt;\r\n<\/pre>\n<h3>2.2 Document Ready Example 2<\/h3>\n<p>You can embed a function inside a function that both use the $ as a jQuery alias like this:<\/p>\n<pre class=\"brush:java\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\n(function($) { \r\n\t\/\/ code using $ as alias to jQuery\r\n  $(function() {\r\n    \/\/ more code using $ as alias to jQuery\r\n  });\r\n})(jQuery);\r\n\/\/ other code using $ as an alias to the other library\r\n&lt;\/script&gt;\r\n<\/pre>\n<h3>2.3 Document Ready Example 3<\/h3>\n<p>Sometimes you want to manipulate pictures and with <code>$(document).ready()<\/code> you won\u2019t be able to do that if the visitor doesn\u2019t have the image already loaded. In which case you need to initialize the jQuery alignment function when the image finishes loading.<\/p>\n<pre class=\"brush:java\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(window).load(function(){  \r\n\t\t\/\/initialize after images are loaded  \r\n   });\r\n&lt;\/script&gt;\r\n<\/pre>\n<h2>3. An Alternative Representation<\/h2>\n<h3>3.1 A Graphical Way of Understanding<\/h3>\n<p>The image below shows a graphical way of understanding how your browser loads the webpage.<br \/>\n<figure id=\"attachment_7200\" aria-describedby=\"caption-attachment-7200\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/document-ready-1.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/document-ready-1.jpg\" alt=\"A Graphical Representation\" width=\"800\" height=\"719\" class=\"size-full wp-image-7200\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/document-ready-1.jpg 800w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/document-ready-1-300x270.jpg 300w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><figcaption id=\"caption-attachment-7200\" class=\"wp-caption-text\">A Graphical Representation<\/figcaption><\/figure><\/p>\n<h3>3.1 A Video Demonstration<\/h3>\n<p>The following videos shows the <code>$(document).ready(function)<\/code> and <code>$(window).load(function)<\/code> on a real browser behaviour.<br \/>\n<div style=\"width: 1920px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-7170-1\" width=\"1920\" height=\"1080\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/document-ready-2.mp4?_=1\" \/><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/document-ready-2.mp4\">http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/document-ready-2.mp4<\/a><\/video><\/div><br \/>\nYou can see that when the windows is loading the page is set to execute a specific loading screen code, while when the page is fully loaded, you can see some other javascript code runs in the page.<\/p>\n<h2>4. Conclusion<\/h2>\n<p>To conclude, it is useful to say the document ready shall be used to make sure you only begin executing js code after the HTML has been loaded, because that is your primary goal, to deliver the HTML. Otherwise, you cannot possibly manipulate DOM (obviously), as jQuery has no elements loaded in order to select any.<\/p>\n<p>Although adding <code>$(document).ready(function(){...})<\/code> is almost the same as adding you script right before the closing tag of the <code>body<\/code> element, a semantic code will better have it explicitly defined.<\/p>\n<h2>5. Download<\/h2>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/jQuery-Document-Ready.zip\"><strong>jQuery Document Ready<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this example, we&#8217;ll have a look into jQuery $( document ).ready(). This is the starting point of almost all of our jQuery code, so there stands a reason why developers should have a clear understanding why it is used and how important it is. Whenever you use jQuery to manipulate your web page, you &hellip;<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-7170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery Document Ready Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we&#039;ll have a look into jQuery $( document ).ready(). This is the starting point of almost all of our jQuery code, so there stands a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Document Ready Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we&#039;ll have a look into jQuery $( document ).ready(). This is the starting point of almost all of our jQuery code, so there stands a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-28T09:15:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T14:13:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery Document Ready Example\",\"datePublished\":\"2015-09-28T09:15:57+00:00\",\"dateModified\":\"2017-12-21T14:13:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/\"},\"wordCount\":667,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/\",\"name\":\"jQuery Document Ready Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-09-28T09:15:57+00:00\",\"dateModified\":\"2017-12-21T14:13:30+00:00\",\"description\":\"In this example, we'll have a look into jQuery $( document ).ready(). This is the starting point of almost all of our jQuery code, so there stands a\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery Document Ready Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Document Ready Example - Web Code Geeks - 2026","description":"In this example, we'll have a look into jQuery $( document ).ready(). This is the starting point of almost all of our jQuery code, so there stands a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Document Ready Example - Web Code Geeks - 2026","og_description":"In this example, we'll have a look into jQuery $( document ).ready(). This is the starting point of almost all of our jQuery code, so there stands a","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-09-28T09:15:57+00:00","article_modified_time":"2017-12-21T14:13:30+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery Document Ready Example","datePublished":"2015-09-28T09:15:57+00:00","dateModified":"2017-12-21T14:13:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/"},"wordCount":667,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/","name":"jQuery Document Ready Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-09-28T09:15:57+00:00","dateModified":"2017-12-21T14:13:30+00:00","description":"In this example, we'll have a look into jQuery $( document ).ready(). This is the starting point of almost all of our jQuery code, so there stands a","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-document-ready-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery Document Ready Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=7170"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7170\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=7170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=7170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=7170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}