René's URL Explorer Experiment

{"@context":"https://schema.org","@graph":[{"@type":"Article","@id":"https://www.webcodegeeks.com/javascript/javascript-document-ready-example/#article","isPartOf":{"@id":"https://www.webcodegeeks.com/javascript/javascript-document-ready-example/"},"author":{"name":"Era Balliu","@id":"https://www.webcodegeeks.com/#/schema/person/c27ecf40c810e6396ba93ffb829c7b0e"},"headline":"JavaScript Document Ready Example","datePublished":"2014-12-05T12:34:05+00:00","dateModified":"2023-08-25T14:20:17+00:00","mainEntityOfPage":{"@id":"https://www.webcodegeeks.com/javascript/javascript-document-ready-example/"},"wordCount":637,"commentCount":0,"publisher":{"@id":"https://www.webcodegeeks.com/#organization"},"image":{"@id":"https://www.webcodegeeks.com/javascript/javascript-document-ready-example/#primaryimage"},"thumbnailUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","keywords":["JQuery"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https://www.webcodegeeks.com/javascript/javascript-document-ready-example/#respond"]}]},{"@type":"WebPage","@id":"https://www.webcodegeeks.com/javascript/javascript-document-ready-example/","url":"https://www.webcodegeeks.com/javascript/javascript-document-ready-example/","name":"JavaScript Document Ready Example - Web Code Geeks - 2026","isPartOf":{"@id":"https://www.webcodegeeks.com/#website"},"primaryImageOfPage":{"@id":"https://www.webcodegeeks.com/javascript/javascript-document-ready-example/#primaryimage"},"image":{"@id":"https://www.webcodegeeks.com/javascript/javascript-document-ready-example/#primaryimage"},"thumbnailUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","datePublished":"2014-12-05T12:34:05+00:00","dateModified":"2023-08-25T14:20:17+00:00","description":"Interested to learn more about Document ready? Check out our Example where we use JS or jQuery to make sure that all external scripts are loaded properly!","breadcrumb":{"@id":"https://www.webcodegeeks.com/javascript/javascript-document-ready-example/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://www.webcodegeeks.com/javascript/javascript-document-ready-example/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/javascript/javascript-document-ready-example/#primaryimage","url":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","contentUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https://www.webcodegeeks.com/javascript/javascript-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":"JavaScript 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/c27ecf40c810e6396ba93ffb829c7b0e","name":"Era Balliu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/#/schema/person/image/","url":"https://secure.gravatar.com/avatar/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","contentUrl":"https://secure.gravatar.com/avatar/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","caption":"Era Balliu"},"description":"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.","sameAs":["http://www.webcodegeeks.com/","https://www.facebook.com/era.balliu.7","https://www.instagram.com/eraballiu/","https://www.linkedin.com/in/eraballiu","https://www.pinterest.com/001r2gw0jt0ln6d/","https://x.com/BalliuEra","https://www.youtube.com/c/eraballiu"],"url":"https://www.webcodegeeks.com/author/era-balliu/"}]}

{"@context":"http:\/\/schema.org","@type":"BreadcrumbList","@id":"#Breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https:\/\/www.webcodegeeks.com\/"}},{"@type":"ListItem","position":2,"item":{"name":"JavaScript","@id":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"}}]}

{"@context":"http:\/\/schema.org","@type":"Article","dateCreated":"2014-12-05T14:34:05+02:00","datePublished":"2014-12-05T14:34:05+02:00","dateModified":"2023-08-25T17:20:17+03:00","headline":"JavaScript Document Ready Example","name":"JavaScript Document Ready Example","keywords":"JQuery","url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-document-ready-example\/","description":"\"Document ready\" is a technique widely used by everyone who uses JavaScript or jQuery in their code, yet only a few people know exactly why it is used. Primarily, it is used to make sure that all your","copyrightYear":"2014","articleSection":"JavaScript","articleBody":"\n\"Document ready\" is a technique widely used by everyone who uses JavaScript or jQuery in their code, yet only a few people know exactly why it is used. Primarily, it is used to make sure that all your external scripts are loaded properly.\n\n\n\nOther reasons to use it are for having unobtrusive JavaScript and separation of concerns. Another perk is the protection it provides against browser bugs in case you make a mistake. Is it necessary? No, it is not. But it is good programming practice to use it.\n\n\n\n\n\n\n\nPure JavaScript document ready\n\n\n\nFirst we create an immediately invoked function expression so that we can have non-public state variables, and we do it like this:\n\n\n\n(function(funcName, baseObj) {\n\/\/content here\n})(\"docReady\", window);\n\n\n\nNote: Every snippet of code in the following part goes inside the curly brackets, where now is written \/\/content here.\n\n\n\nLater we set the function name to docReady and the base object to object.These can be set to the object and function name you want, and be used in a different namespace. It goes like this:\n\n\n\n funcName = funcName || \"docReady\"\n    baseObj = baseObj || window;\n    var readyList = [];\n    var readyFired = false;\n    var readyEventHandlersInstalled = false;\n\n\n\nWhen the document is ready we call the ready() function,like this:\n\n\n\n     function ready() {\n        if (!readyFired) {\n            readyFired = true;\n            for (var i = 0; i < readyList.length; i++) {\n                readyList[i].fn.call(window, readyList[i].ctx);\n            }\n            readyList = [];\n        }\n    }\n\n\n\nBefore we start calling callbacks we should give the value true to readyFired. If by any chance, callbacks happen to add new ready handlers, the docReady() function will see that it already fired and will schedule this callback right after the for loop finishes it's execution. This way all handlers are executed in their order and we can be sure that no new ones will be added to the readyList while it is still being executed. Then, we free all closures held by these functions by setting the readyList to an empty array.\n\n\n\nThe ready() function protects itself against being called more than once.\n\n\n\nNow we place the code for the interface. It goes like this:\n\n\n\nbaseObj[funcName] = function(callback, context) {\n        \/\/content\n    }\n\n\n\nThe context argument is optional, and if included, it will go as an argument to the callback. But what's instead of the \/\/content? Here you go.\n\n\n\nTake a look at this code, which will go in the place of \/\/content, written in the code above:\n\n\n\n        if (readyFired) {\n            setTimeout(function() {callback(context);}, 1);\n            return;\n        } else {\n            readyList.push({fn: callback, ctx: context});\n        }\n\n\n\nWe have a conditional with the condition that if readyFired has fired already, to schedule the callback to execute immediately, though asynchronously. If not, add it to the list, so it can be executed in order.\n\n\n\nWe check to see if the document.readystate === \"complete\" and if so, we have to schedule the ready() function to run. If we don't have the ready event handlers installed, we install them right away. If document.addEventListener exists, then install event handlers using .addEventListener() for both \"DOMContentLoaded\" and \"load\" events. The \"load\" event is optional, as it is used only for backup. Otherwise, if document.addEventListener doesn't exist, then install event handlers using .attachEvent() for \"onreadystatechange\" and \"onload\" events.\n\n\n\nif (document.readyState === \"complete\") {\n            setTimeout(ready, 1);\n        } else if (!readyEventHandlersInstalled) {\n            if (document.addEventListener) {\n                document.addEventListener(\"DOMContentLoaded\", ready, false);\n                window.addEventListener(\"load\", ready, false);\n            } else {\n                document.attachEvent(\"onreadystatechange\", readyStateChange);\n                window.attachEvent(\"onload\", ready);\n            }\n            readyEventHandlersInstalled = true;\n        }\n}\n\n\n\nAnd with this, we're set. Can we do it differently? Of course.\n\n\n\nDocument Ready using JQuery\n\n\n\nIf you want to use jQuery to detect whether your document is ready or not, you have two main functions: $(document).ready() and $( window ).load(function() { ... }). Let's introduce them one by one.\n\n\n\nThe $(document).ready() will be run once, after the DOM is already loaded. This is how the code goes:\n\n\n\n$( document ).ready(function() {\n    console.log( \"ready!\" );\n});\n\n\n\nYou can present this same function differently, by passing another function instead of the anonymous one. First you have to write the function and then use it by the $(document).ready() method. The code would look like this:\n\n\n\nfunction otherFunction( jQuery ) {\n    \/\/ Code to run when the document is ready.\n}\n $( document ).ready( otherFunction );\n\n\n\nThe $( window ).load(function() { ... }) function is executed only after the DOM and all the images or videos of the website are loaded. It is used in the same way as $( document ).ready();. Here's how it will look:\n\n\n\n$( window ).load(function() {\n        console.log( \"window loaded\" );\n });\n\n\n\nWith that, we are now able to detect whether our document is ready or not. Use whatever is more convenient for you, be it plain JavaScript or JQuery.\n\n\n\nDownload the source code\n\n\n\nThis was an example of document ready using JavaScript.\n\n\n\nDownloadYou can download the full source code of this example here: DocumentReady\n\n\n\nExplore available Java intern job opportunities in remote positions on Jooble\n\n\n\n\n","publisher":{"@id":"#Publisher","@type":"Organization","name":"Web Code Geeks","logo":{"@type":"ImageObject","url":"\/wp-content\/uploads\/2015\/12\/WebCodeGeeks-logo.png"},"sameAs":["http:\/\/feeds.feedburner.com\/WebCodeGeeks","https:\/\/www.facebook.com\/webcodegeeks","https:\/\/twitter.com\/webcodegeeks","https:\/\/www.youtube.com\/channel\/UCcJkBzpdp8TWzzu0bSjzikw","https:\/\/github.com\/webcodegeeks"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-document-ready-example\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Era Balliu","url":"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/"},"image":{"@type":"ImageObject","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":1200,"height":150}}