Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@milosdjakonovic milosdjakonovic commented Aug 18, 2015

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

This comment has been minimized.

Copy link

@arobbins arobbins commented Oct 12, 2015

Beautiful. Thanks for sharing.

@herschel666

This comment has been minimized.

Copy link

@herschel666 herschel666 commented Feb 17, 2016

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

@jasdeepkhalsa

This comment has been minimized.

Copy link

@jasdeepkhalsa jasdeepkhalsa commented Mar 10, 2016

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

This comment has been minimized.

Copy link

@SmithWebster SmithWebster commented Dec 14, 2016

Perfect! Thanks!

@zymov

This comment has been minimized.

Copy link

@zymov zymov commented Jun 2, 2017

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

@bdalina54

This comment has been minimized.

Copy link

@bdalina54 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