2012-02-29 2 views
3

Допустим, у меня есть страница HTML, которая содержит файл JavaScript: каких средства именно документ готового в JQuery

В base.js, как это:

$(document).ready(function() { 
    obj.init(); 
} 

// .............. 

var obj = {...}; 

Удивительно, но иногда (не все время) Firebug показывает мне неопределенную ошибку на звонке obj.init()! Я понимаю, что готовый документ означает все элементы html, включая изображения, загруженные и исполняемые файлы javascript (?).

Я считаю, что для того, чтобы найти основную причину этой ошибки, нам нужно понять, что именно означает «документ готов»? у кого-нибудь есть понимание?

============================

Update: может быть, я не должен упомянуть об имидже здесь, моя главная В частности, речь идет о файле javascript. «DOM полностью сконструирован» включает в себя «весь код javascript выполнен»?

============================

Update снова: Кажется, что люди здесь согласились, что событие «document.ready «НЕ будет запущено до тех пор, пока не будет загружен и не будет загружен ВСЕ код javascript. Таким образом, основная причина проблемы остается неизвестной. Я обошел эту проблему после того, как переместил блок $ (document) .ready в нижней части файла javascript.

+2

'ready! == load' 'document ready означает, что все изображения, загруженные и исполняемые javascript, загружаются и выполняются« в частности, неверно. – mrtsherman

+0

@mrtsherman прав, «документ готов» зависит от браузера, а не от JQuery. – Deleteman

+0

Изображения не обязательно загружаются на document.ready. – j08691

ответ

4

Из документации jQuery.ready():

Хотя JavaScript предоставляет load событие для выполнения кода, когда страница отображается, это событие не получить срабатывает до тех пор, все активы, такие как изображения не были получены полностью. В большинстве случаев сценарий можно запустить, как только иерархия DOM будет полностью построена. Обработчик, прошедший до .ready(), гарантированно будет выполнен после того, как DOM будет готов, поэтому это, как правило, лучшее место для присоединения всех других обработчиков событий и запуска другого кода jQuery. При использовании сценариев, основанных на значении свойств стиля CSS, важно ссылаться на внешние таблицы стилей или внедрять элементы стиля перед ссылкой на сценарии.

В случае, когда код использует загруженные активы (например, если требуются размеры изображения), вместо этого код должен быть помещен в обработчик для события load.

+0

«Хотя JavaScript предоставляет событие загрузки для выполнения кода при визуализации страницы, это событие не запускается до тех пор, пока все активы, такие как изображения, не будут полностью получены». здесь «это событие» относится к событию «load», а не к «готовому» событию, правильно? он не упоминал о внешнем файле javascript, хотя .. – curiousman

+0

@ user1240869: Да, документация специально отвечает на ваш вопрос о том, что именно означает «документ готов» и как он отличается от события, выполняемого при загрузке всех файлов. 'ready' на самом деле является событием, специфичным для jQuery (как описано [здесь] (http://stackoverflow.com/a/3698214/548696)), но' onload' фактически встроен в JavaScript (см. его на список [здесь] (https://developer.mozilla.org/en/DOM/DOM_event_reference)). «Готовый» jQuery очень близок к ['DOMContentLoaded'] (https://developer.mozilla.org/en/DOM/DOM_event_reference/DOMContentLoaded) (см. Список совместимости). – Tadeck

+0

Спасибо за ссылку на «DOMContentLoaded», он ответил на мои вопросы относительно изображений, загрузки таблицы стилей, когда обработчик события document.ready запущен, Но опять же, он не ответил на мой вопрос относительно кода javascript! я понимаю, что DOM НЕ будет полностью сконструирован ДОПОЛНИТЕЛЬНЫЙ код javascript, загруженный и выполненный! я прав? – curiousman

1

Прежде чем ссылаться на него, вы должны определить obj.

Кроме того, document.ready не означает, что ресурсы будут загружены, только чтобы документ был разобран, поэтому ресурсы загружаются между готовым документом и событием $(window).load.

+0

obj определяется под блоком document.ready, так что это не проблема. – curiousman

+0

'$ (document) .ready (function() { obj.init(); }); var obj = {}; 'приведет к невозможности вызывать метод' init' undefined, поскольку 'obj' НЕ определен в области действия функции, которую вы предоставили для метода jQuery. ** Как ** это не проблема? Пожалуйста, укажите ** реальный код **. Из ** вашего ** кода и сообщения об ошибке, похоже, что вы ошибочно принимаете документ, который является событием DOM для ссылки на объекты, которые не были определены в области. –

+0

var obj определен вне функции, поэтому он является частью объекта window, поэтому я могу ссылаться на него в документе. – curiousman

2

Событие ready происходит, когда документ загружается и анализируется.

Включая все файлы Javascript, но не изображений.

Готовое событие происходит после анализа документа. Для некоторых браузеров для этого есть определенное событие, в других браузерах jQuery использует таймер, который проверяет статус документа.Это означает, что событие происходит либо сразу, как весь документ анализируется, либо чуть позже, в зависимости от браузера. Обычно это не проблема, так как этого не происходит до что-то из документа анализируется.

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

+0

У вас есть источник для поддержки того, что вы сказали здесь? например «Это включает в себя все файлы Javascript, но не изображения».? если я правильно вас понимаю, в этом случае, как вы объясните, что firebug сообщит об ошибке «неопределенной» для объекта переменной? – curiousman

+0

+1 Очень хороший и подробный ответ. Существует еще один ответ на этот вопрос, также опубликованный вами, Гуффа: http://stackoverflow.com/a/3698214/548696.'ready' просто упрощает определение момента, когда DOM готов. – Tadeck

+0

хорошее описание –