jQuery의 document.ready 방법

Question

에 태그에 해당하기 전에 스크립트 태그를 삽입, 그것은 jQuery의 document.ready 함수 내에서 myMethod()를 호출하는 것과 같습니다? 그렇지 않다면 왜?

Answer 1

에서한다는 보장이 없다 here :

후드 아래 : $ (문서) .ready()는 존 에서 기대하는 것처럼 Resig 씨의 DOM이 준비되면 결정하는 jQuery의 방법은 최적화의 구색을 사용합니다. 예를 들어 브라우저가 DOMContentLoaded 이벤트를 지원하면 (비 IE 브라우저가 많은 경우처럼) 해당 이벤트에서 이 발생합니다. 그러나 IE는 문서의 readyState가 "완료"에 도달 할 때까지 안전하게 실행할 수 없습니다. 일반적으로 나중에 완료됩니다. 중 해당 최적화를 사용할 수없는 경우 window.onload는 이벤트를 트리거합니다.

이 이벤트는 HTML 태그 내의 위치와 관련이 없습니다. </body> 렌더링시에도 다른 이벤트가 계속 발생합니다.

Answer 2

아니 당신이 AFAIK, 이전 버전의 브라우저에서 HTML 렌더링을 막지 않도록 닫는 </body> 태그 앞에 <script> 태그를 배치, 동일하지 않습니다,하지만 당신은 DOM이 "준비"입니다

Answer 3

정확하게는 아닙니다. $(document).ready();은 DOM이로드되고 브라우저가 페이지의 모든 요소 (콘텐츠 자체가 아님)를 인식 한 직후에 실행되는 DOMContentLoaded 이벤트에서 반응합니다.

코드가 일반적으로이 블록 안에 들어있는 주된 이유는 병렬 로딩 차단을 방지하는 것이 아니라 페이지로드 중에 조작해야하는 요소가 실제로로드되어 DOM 트리에 존재하는지 확인하는 것과 관련이 있습니다. 브라우저가 올바르게 인식하지 못하는 요소를 조작하는데별로 의미가 없습니까?

페이지 하단에 JavaScript 콘텐츠 (또는 그와 관련된 기타 콘텐츠)를 넣는 것은 실제로 콘텐츠 자체를 포함하여 페이지로드가 완료된 후에 발생하는 onload 이벤트와 더 밀접하게 관련됩니다. 어느 쪽이든 $(document).ready() 블록 내부의 내용은 페이지 하단의 코드보다 먼저 실행되지만, ready() 블록 내부의 코드가 의존하는 외부 라이브러리를로드하는 경우에는 페이지 맨 아래에 넣을 수 없습니다.

일반적으로 외부 라이브러리에 의존하지 않고 DOM로드가 성공한 코드는 페이지 하단에 안전하게 배치 할 수 있습니다. DOM을로드 한 직후에 실행해야 할 물건이 있다면 $(document).ready() 블록에 해당 코드가 가장 필요하지만 원하는 곳 어디에서나 블록의 중앙에 배치 할 수 있습니다. (때로는 멋진 트릭이 될 수 있음).