Что именно гарантирует $ (document) .ready? - PullRequest
Новая
       12

Что именно гарантирует $ (document) .ready?

19 голосов
/ 05 июля 2011

Запуск моего (довольно сложного) приложения JavaScript / jQuery в браузере Google Chrome, может показаться, что $(document).ready срабатывает, пока некоторые файлы JavaScript еще не загружены.

Соответствующий код (упрощенно):

В моем HTML-файле 

<script>var httpRoot='../../../';var verifyLoad = {};</script>

<script src="../../../globalvars.js"></script>
<script src="../../../storagekeys.js"></script>
<script src="../../../geometry.js"></script>
<script src="../../../md5.js"></script>
<script src="../../../serialize.js"></script>
...
<script src="../../../main.js"></script>

В качестве последнего утверждения каждого из файлов .js, кроме main.js: 

verifyLoad.FOO = true; // where FOO is a property specific to the file

Например, 

verifyLoad.jquerySupplements = true; 

verifyLoad.serialize = true;

В main.js: 

$(document).ready(function() {
    function verifyLoadTest (scriptFileName, token) {
        if (!verifyLoad.hasOwnProperty(token)) {
            console.log(scriptFileName + ' not properly loaded'); 
        };
    };
    verifyLoadTest('globalvars.js', 'globalvars');
    verifyLoadTest('storagekeys.js', 'storagekeys');
    verifyLoadTest('geometry.js', 'geometry');
    verifyLoadTest('md5.js', 'geometry');
    verifyLoadTest('serialize.js', 'serialize');
    ...
}

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

1 Ответ

18 голосов
/ 05 июля 2011

Событие готовности документа вызывается, когда браузер анализирует HTML-файл от начала до конца и преобразует его в структуру DOM. Это никоим образом не гарантирует, что будут загружены любые другие ресурсы (например, таблицы стилей, изображения или, как в этом случае, сценарии). Он относится только к структуре DOM и запускается независимо от состояния загрузки ресурсов страницы.

Если вы хотите дождаться загрузки ресурсов, используйте событие window load, которое вызывается только после завершения загрузки каждого элемента на странице.

См:

...