Обработчик загрузки DOM (DOMContentLoaded)

Самый простой способ вызова, это onload, но проблема в том, что обработчик onload сработает, когда загрузится весь документ, все картинки и внешние объекты. И если объект находится на недоступном сервере, то onload может и не вызваться.

При использовании готовых библиотек, это обычно обрабатывается вызовом $(document).ready.

Если Вы не используете сторонние библиотеки, а хотите реализовать это на чистом JavaScript и при этом обеспечить кроссбраузерность (работу во всех браузерах), то вам пригодится эта универсальная функция, которую можно смело вынести во внешний script-файл.

Исходный код этого примера:

<script>
var funcDomReady='';

function onDomReady(func) { // функция добавления события
        var oldonload = funcDomReady;
        if (typeof funcDomReady != 'function')
                funcDomReady = func;
        else {
                funcDomReady = function() {
                        oldonload();
                        func();
                }
        }
}

// добавляем функцию, которую нужно вызвать после загрузки DOM
onDomReady(alert("DOM загружен! Обработчик 1"));
onDomReady(alert("DOM загружен! Обработчик 2"));

function init() {
    // выходим, если функция уже выполнялась
    if (arguments.callee.done) return;

    // устанавливаем флаг, чтобы функция не исполнялась дважды
    arguments.callee.done = true;

    if(funcDomReady)funcDomReady();	// вызываем всю цепочку обработчиков
};

/* для Mozilla/Firefox/Opera 9 */
if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", init, false);

/* для Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=\"__ie_onload\" defer=\"defer\" src=\"javascript:void(0)\"><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
    if (this.readyState == "complete")
	init();}; // вызываем обработчик для onload
/*@end @*/

/* для Safari */
if (/WebKit/i.test(navigator.userAgent)) { // условие для Safari
    var _timer = setInterval(function() {
	if (/loaded|complete/.test(document.readyState)) {
	    clearInterval(_timer);
	    init(); // вызываем обработчик для onload
	}
    }, 10);
}

/* для остальных браузеров */
window.onload = init;
</script>

И на закуску красивое простое решение:

function ready(cb) {
    /in/.test(document.readyState) ? setTimeout(ready.bind(null, cb), 9) : cb();
}
ready(function(){ console.log("The DOM is ready"); });