Skip to content

Instantly share code, notes, and snippets.

@dciccale
Last active October 22, 2021 21:52
Show Gist options
  • Star 41 You must be signed in to star a gist
  • Fork 15 You must be signed in to fork a gist
  • Save dciccale/4087856 to your computer and use it in GitHub Desktop.
Save dciccale/4087856 to your computer and use it in GitHub Desktop.
Tiny Cross-browser DOM ready function in 111 bytes of JavaScript

DOM Ready

Tiny Cross-browser DOM ready function in 111 bytes of JavaScript.

<!doctype html>
<title>Demo</title>
<script>
var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}
DOMReady(function () {
alert('The DOM is Ready!');
});
</script>
<h1>Demo</h1>
<p>Tiny Cross-browser DOM ready function in 111 bytes</p>
/**
* @param {function} a The function to execute when the DOM is ready
*/
function(a, b, c) {
b = document
c = 'addEventListener'
b[c] ? b[c]('DocumentContentLoaded', a) : window.attachEvent('onload', a)
}
function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}
@milosdjakonovic
Copy link

Window onload is not the same as dom ready aka DocumentContentLoaded here.
In IE8 and below this will fire function where all resources (such as images and so) is loaded.

@arobbins
Copy link

Beautiful. Thanks for sharing.

@herschel666
Copy link

In tinydomready.js it has to be DOMContentLoaded instead of DocumentContentLoaded.

@jasdeepkhalsa
Copy link

Yes I believe that's a mistake @dciccale, in line 7 of tinydomready.js DocumentContentLoaded should be DOMContentLoaded. In the last revision this was changed for some reason.

@SmithWebster
Copy link

Perfect! Thanks!

@zymov
Copy link

zymov commented Jun 2, 2017

window.onload is not the same as DOMContentLoaded
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

@bdalina54
Copy link

bdalina54 commented Aug 21, 2017

Great work, i also see this from https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery by Peter Mortensen and Timo Huovinen

function start(f){ /in/.test(document.readyState)?setTimeout(start,5,f) : f()}

usage

start(function() {alert("I'm ready"); });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment