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.

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.

arobbins commented Oct 12, 2015

Beautiful. Thanks for sharing.

@herschel666

This comment has been minimized.

herschel666 commented Feb 17, 2016

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

@jhbsk

This comment has been minimized.

jhbsk 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.

SmithWebster commented Dec 14, 2016

Perfect! Thanks!

@zymokey

This comment has been minimized.

zymokey 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.

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