Запуск кода jQuery перед тем, как DOM готов?

Есть ли способ выполнить jQuery-код до готовности DOM?

Ответ 1

jQuery - это просто Javascript, поэтому на самом деле вопрос: "Можно ли запустить JavaScript до того, как DOM готов", и с этим я предполагаю, что вы имеете в виду документ, а не DOM.

Если мы сможем согласиться с тем, что вопрос: "Можно ли запустить JavaScript до того, как документ будет готов". Тогда ответ "да". JavaScript будет выполняться при обнаружении.

Вот почему вы почти всегда видите либо $(function(){...}), либо $(document).ready(function(){...}), потому что для большинства jQuery-кода требуется, чтобы документ был готов, но код, прикрепленный к обработчику событий, безусловно, выполняется до того, как документ будет готов (иначе он не сможет для обработки события готовности документа).

Обычно вы должны разместить свой Javascript в нижней части вашего HTML-кода, но если вы хотите, чтобы он был выполнен ранее, вы можете просто разместить его раньше в документе, например. в заголовке.

<html>
  <head>
     ...
     <script>
        //place your code to be executed early here
     </script>
  </head>
...
</html>

Ответ 2

Если вы включите jQuery в начало вашего документа, а затем напишите свой код в другом теге script в голове, он будет запущен до того, как DOM будет готов:

<head>
    <script src="jquery.js"></script>
    <script>
        // Do some stuff before the DOM is ready
    </script>
</head>
<body>
    <!-- Browser hasn't got this far, so no elements will be available -->
</body>

Однако, очевидно, вы не сможете взаимодействовать с любыми элементами DOM, так как они еще не существуют.

Сказав это, существует технология, которую вы можете использовать в современных браузерах, которые могут позволить вам взаимодействовать с элементами DOM, поскольку они вставлены на страницу (в то время как браузер ее выполняет). Он полагается на события анимации CSS. Я написал простую библиотеку (Progressive.js), чтобы упростить ее обработку.