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

Question

Я заметил, что $(document).ready(..) вызывает заметную задержку в применении эффектов JavaScript.Однако я также понимаю, что просто наличие эффекта в <script> не всегда может работать, потому что DOM может быть не готов.

Когда вы всегда должны помещать свой код в $(document).ready и когда можно вывести его в глобальный тег <script>?

Answer 1

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

Другой подход - переместить теги сценария в конец тега body, чтобы они выполнялись после того, как DOMзагружен.В любом случае нет никаких существенных преимуществ / недостатков, но это усложняет организацию вашего кода, в то время как использование $ (document) .ready () позволяет вам держать javascript в заголовке вашей страницы, даже если это необходимовыполнить в конце.

Answer 2

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

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

Когда вынужны элементы и изображения загружены / готовы, вместо этого используйте $(window).load(func).

Answer 3

Если я не ошибаюсь, функция $ (document) .ready (..) должна запускаться на DOMContentLoaded, а не ждать, пока возникнет событие Load:

http://api.jquery.com/ready/

С другой стороны, $ (document) .load (..) будет выполняться после того, как DOM будет отображен, а все ресурсы загружены, что полезно, если вы полагаетесь на свойства ресурсов на странице (скажем размеры изображения).

Является ли функция $(document).load(..) в теге <script> на вашей странице или во внешнем файле JS, на который ссылается ваша страница? В последнем случае задержка может быть частично вызвана разбором скрипта.

Вы пытались поместить глобальный тег <script> внизу вашей страницы и запустить его в двух разных сценариях - один раз с использованием только функции $(document).load(..) и снова с содержимым функции загрузки в сценарий вместо. Есть ли существенная разница в эффектах JS, запущенных между этими двумя случаями?

Answer 4

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