Когда вам нужно использовать $(document).ready()?

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

Во всех браузерах, которые я тестировал, вполне приемлемо начать взаимодействие с элементами html и DOM сразу после закрывающего тега. (Например.

<div id="myID">
 My Div
</div>
<script type="text/javascript">
$('#myID').initializeElement();
</script>

Итак, в этот момент мне интересно, существует ли $(document).ready(), чтобы уменьшить мышление, связанное с написанием кода javascript, который выполняется во время загрузки страницы. В случае использования $(document).ready() регулярно возникают проблемы с выпуском, такие как popping и "артефакты" между браузером, сначала начинающие рисовать страницу, и javascript, фактически выполняющийся, когда страница "готова".

Существуют ли какие-либо сценарии, где требуется $(document).ready()?

Есть ли причины, по которым я не должен писать сценарии инициализации, как показано?

Ответ 1

В случае внешних скриптов $(document).ready() может быть единственным вариантом. Что касается inline script, это немного отличается.

В соответствии со стандартом HTML 4.01 кажется немного неоднозначным, является ли метод инициализации, показанный выше, законным:

http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.4

Скрипты, выполняемые при загрузке документа, могут изменить содержимое документа динамически. Возможность сделать это зависит от языка сценариев (например, "document.write" в объектной модели HTML поддерживаемых некоторыми поставщиками).

HTML-документы ограничены соответствием HTML DTD как до и после обработки любой SCRIPTэлементы.

В проекте HTML 5 кажется очень понятным, что эта практика полностью поддерживается:

http://www.w3.org/TR/html5/scripting-1.html#scripting-1

В следующем примере показано, как Элемент script может использоваться для определения функция, которая затем используется другими части документа. Он также показывает как элемент script можно использовать для invoke script, в то время как документ анализируется, в этом случае инициализируйте выход формы.

<script>
 function calculate(form) {
   var price = 52000;
   if (form.elements.brakes.checked)
     price += 1000;
   if (form.elements.radio.checked)
     price += 2500;
   if (form.elements.turbo.checked)
     price += 5000;
   if (form.elements.sticker.checked)
     price += 250;
   form.elements.result.value = price;
 }
</script>
<form name="pricecalc" onsubmit="return false">
 <fieldset>
  <legend>Work out the price of your car</legend>
  <p>Base cost: £52000.</p>
  <p>Select additional options:</p>
  <ul onchange="calculate(form)">
   <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
   <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
   <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
   <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
  </ul>
  <p>Total: £<output name=result></output></p>
 </fieldset>
 <script>
  calculate(document.forms.pricecalc);
 </script>
</form>

Ответ 2

Основная причина - внешние файлы, которые включены в голову. Когда вы добавляете файл в свой <head>, он запускается немедленно. Это означает, что если JavaScript взаимодействует с DOM, его необходимо обернуть в Dom Ready.

Он также необходим для ненавязчивого JavaScript и разделения проблем. В идеале ваши JavaScript и HTML находятся в отдельных файлах. Если вы последуете этому, у вас не будет никаких встроенных тегов script в вашем HTML.

Во-вторых, защищать себя от непонятных ошибок браузера при ошибках. Бывают случаи, когда они не сохраняются, чтобы сразу перейти к элементам DOM и управлять ими. (Я смотрю на тебя, IE6!)

Третья причина - сохранить код чистым.

Смешивание тегов script в ваш HTML делает код спагетти.

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

У нас есть код примерно в десять раз хуже того. Это хорошая боль, чтобы читать/поддерживать

Ответ 3

Все внутри него будет загружаться, как только загрузится DOM и до загрузки содержимого страницы.

Функция $(document).ready() имеет массу преимуществ по сравнению с другими способами получения событий. Прежде всего, вам не нужно помещать какую-либо "поведенческую" разметку в HTML

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