JSFiddle - React, Tailwind, and code Playground
by mandrika
HTML
<span id="message" style="color:red">Document not ready!</span>
JavaScript
// Example
bindReady(function () {
var message = document.getElementById("message");
message.innerText="Document ready!";
message.style.color = "green";
});
// end Example
// bindReady source
/*!
* jQuery JavaScript Library v1.11.3
* http://jquery.com/
*
* Includes Sizzle.js
* http://sizzlejs.com/
*
* Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors
* Released under the MIT license
* http://jquery.org/license
*
* Date: 2015-04-28T16:19Z
*/
var readyFired = false;
function bindReady(readyCallback) {
/**
* Clean-up method for dom ready events
*/
function detach() {
if (document.addEventListener) {
document.removeEventListener("DOMContentLoaded", completed, false);
window.removeEventListener("load", completed, false);
} else {
document.detachEvent("onreadystatechange", completed);
window.detachEvent("onload", completed);
}
}
// Handle when the DOM is ready
function ready() {
if (!readyFired) {
// Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
if (!document.body) {
setTimeout(ready, 1);
}
// Remember that the DOM is ready
readyFired = true;
// Time to call back
if (readyCallback && typeof (readyCallback) === "function") {
readyCallback.apply();
}
}
}
/**
* The ready event handler and self cleanup method
*/
function completed() {
// readyState === "complete" is good enough for us to call the dom ready in oldIE
if (document.addEventListener || event.type === "load" || document.readyState === "complete") {
detach();
ready();
}
}
// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState...