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.

Show comment
Hide comment
@milosdjakonovic

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

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.

Show comment
Hide comment
@arobbins

arobbins Oct 12, 2015

Beautiful. Thanks for sharing.

arobbins commented Oct 12, 2015

Beautiful. Thanks for sharing.

@herschel666

This comment has been minimized.

Show comment
Hide comment
@herschel666

herschel666 Feb 17, 2016

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

herschel666 commented Feb 17, 2016

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

@jhbsk

This comment has been minimized.

Show comment
Hide comment
@jhbsk

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

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.

Show comment
Hide comment
@SmithWebster

SmithWebster Dec 14, 2016

Perfect! Thanks!

SmithWebster commented Dec 14, 2016

Perfect! Thanks!

@zymokey

This comment has been minimized.

Show comment
Hide comment
@zymokey

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.

Show comment
Hide comment
@bdalina54

bdalina54 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"); });

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