Когда вам нужно использовать $(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() вы можете загружать или запускать свои события или делать то, что вы хотите, до загрузки окна.
