Выполнение javascript скрипта после загрузки страницы. Как проверить что сайт загрузился?

Написав вот такой код на сайте, мы неприменно заметим что он выдет ошибку...
Почему возникает ошибка, ведь код правильный?

<script type="text/javascript">
function olyx() {
	document.getElementById('baran').innerHTML='ну ты и баран';
}
olyx();
</script>

<div id="baran"></div>

Этот вопрос очень часто задают новички.
На самом деле ошибка возникает из за того что скрипт выполняется раньше чем создается элемент baran

Чтобы все заработало нужно поменять их местами

<div id="baran"></div>

<script type="text/javascript">
function olyx() {
	document.getElementById('baran').innerHTML='ну ты и баран';
}
olyx();
</script>

Но это допотопный способ не всегда удобен и практичен.

Некоторые умудряются переписать пример примерно вот так

<script type="text/javascript">
function olyx() {
	document.getElementById('baran').innerHTML='ну ты и баран';
}
window.onload = function () {
	olyx();
}
</script>

<div id="baran"></div>

Чтож в этом случае функция olyx() вызовется после загрузки документа.
Но представте что на странице сайта куча картинок, которые грузятся пол часа.
И что нам ждать пол часа пока загрузятся картинки чтобы вызвать функцию???
Да это маразм полнейший.
ведь на сайте вместо картинок могут быть счетчики посещений который дадут такой же эффект длительного простаивания.

К счастью выход есть.

Посмотрим как можно обойтись без маразмов, для этого перед тегом head подключим scriptjava фреймворк

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Теперь перепишем первый пример но уже в нормальном исполнении

<script type="text/javascript">
function olyx() {
	$$('baran','ну ты и баран');
}

//выполнение кода только после загрузки документа
$$r(function() {
	//тут пишем все что хотим чтобы выполнилось после загрузки документа
	olyx();
}); 

</script>

<div id="baran"></div>

Как видите код заметно сократился, а все то что нужно чтобы выполнилось после загрузки документа мы прописали тут

$$r(function() {
	//тут пишем все что хотим чтобы выполнилось после загрузки документа
	olyx();
});

Отличие этого кода от window.onload заключается в том, что мы не будем дожидаться загрузки картинок, а лиш дождемся полной загрузки документа - html кода и скриптов.