Будучи уведомленным, когда страница DOM загрузилась (но прежде window.onload)
8 ответов
Нет никакого метода перекрестного браузера для проверки, когда DOM готов - это - то, почему библиотеки как jQuery существуют к краткому обзору далеко противные небольшие биты несовместимости.
Mozilla, Opera и современный WebKit поддерживают DOMContentLoaded событие. IE и Safari нужны странные взломы как прокрутка окна или проверка таблиц стилей. Окровавленные детали содержатся в jQuery bindReady() функция.
Я нашел эту страницу, которая показывает компактное автономное решение. Это, кажется, работает над каждым браузером и имеет объяснение на как:
YUI использует три теста, чтобы сделать это: для Firefox и недавнего WebKit там событие DOMContentLoaded, которое запущено. Для более старого Safari смотрел document.readyState, пока это не становится "загруженным" или "завершенным". Для IE тег HTML <P> создается и "doScroll ()" метод, названный, который должен ошибка, если DOM не готов. Источник для YAHOO.util. Событие показывает YUI-определенный код. Поиск "doScroll" в Event.js.
Пользование библиотекой как jQuery сохранит Вас бесчисленные часы несоответствий браузеров.
В этом случае с jQuery Вы можете просто
$(document).ready ( function () {
//your code here
});
Если Вам любопытно, можно смотреть на источник, чтобы видеть, как он сделан, но в этот день и возраст, я не думаю, что любой должен заново изобретать это колесо, когда устройство записи библиотеки сделало всю болезненную работу для Вас.
Просто возьмите соответствующую часть кода из jQuery, John Resig покрыл большинство оснований по этой проблеме уже в jQuery.
Почему не это:
<body>
<!-- various content -->
<script type="text/javascript">
<!--
myInit();
-->
</script>
</body>
Если я понимаю, что вещи правильно, myInit собирается выполняться, как только браузер поразил его в странице, которая является последней вещью в теле.
Используя setTimeout может работать вполне хорошо, хотя то, когда он выполняется, до браузера. При передаче нуля как времени тайм-аута браузер выполнится, когда вещи будут "улажены".
Хорошая вещь об этом состоит в том, что Вы можете иметь многих из них и не должны волновать по поводу объединения в цепочку onLoad события.
setTimeout(myFunction, 0);
setTimeout(anotherFunction, 0);
setTimeout(function(){ doSomething ...}, 0);
и т.д.
Они будут все работать, когда документ закончил загружаться, или если Вы настроите тот после того, как документ будет загружен, они будут бежать за Вашим сценарием, закончил работать.
Порядок, в котором они работают, не определяется и может измениться между браузерами. Таким образом, Вы не можете рассчитывать myFunction быть выполненным прежде anotherFunction например.
Это работает вполне прилично:
setTimeout(MyInitFunction, 0);