2010-01-03 2 views
8

jQuery에서 DOM 요소가 상호 작용할 준비가되었는지 확인하기 위해 $(document).ready()을 사용해야한다고 들었습니다. 스크립트 태그가 <head>에있는 경우이 값이 적용된다는 것을 알고 있습니다. DOM 요소가 모두 DOM-ready 함수를 사용해야합니까? <body> 끝 부분에 있다면? 내가하지 않으면 내 코드가 실패 할 브라우저가 있습니까?스크립트가 본문 끝 부분에있는 경우 DOM 준비 기능을 사용해야합니까?

감사합니다.

답변

13

</body> 직전에 <script> 블록에서 수행 할 수없는 작업은 DOM 콘텐츠를 본문에 추가하는 것입니다. 이것은 IE가 두려운 "Operation aborted"에 적합하게 만드는 append-relative-to-parse 문제입니다.

그래서 스크립트 나 플러그인을 사용하면 body 요소의 끝에 인라인을 호출 할 수 없습니다. 그렇지 않으면 계속하십시오.

최신 Mozilla, Opera 또는 WebKit 브라우저에서는 아무 것도 얻을 수 없으므로 ready이 잠시 실행됩니다. 그것은 IE에서 불쾌하지만 대부분 해가되는 해킹 루프를 피할 것이고, 그렇지 않으면 onload을 기다리는 것으로 돌아가는 다른 (더 오래된 브라우저 또는 더 애매한) 브라우저에 대해 훨씬 빨리 해고 될 것입니다.

+1

+1 나를 이길, 모든 위대한 포인트! –

+0

잘 알고 있습니다. - 감사합니다! – Matchu

+3

아니요, IE는 '

0

DOM 준비 기능은 전체 DOM이 실제로 작성되어 문서의 모든 요소에 도달 할 수있게합니다. 일반 window.onload은 모든 이미지가로드 된 경우에만로드되며 문서 구조가 존재하는 즉시 jQuery의 이벤트가 트리거됩니다. "문서가로드 될 때 바로"발생할 수있는 것이 있으면 $(document).ready() 이외의 것을 사용할 이유가 없습니다.

+0

제 질문은, 스크립트가 실행될 때까지 문서가 충분히로드 되었습니까? – Matchu

0

내 스크립트 전에 나타나는 HTML 요소의 DOM에 액세스 할 수없는 브라우저를 본 적이 없습니다.

jQuery를 사용하고 있다면 이미 ready() 메소드를 사용하여 다른 사람들이 jQuery를 사용하여 코드를 더 쉽게 이해할 수 있습니다.

왜 이것을 피하려면 몇 가지 이유가 있습니까?

은 (당신이 jQuery를 선택한 다음, 음, 그래, 내 경험에서, 당신은 항상 스크립트 전에 나타나는 요소의 DOM에 액세스 할 수 있습니다로드 피하기 위해 방법을 찾고 있다면.)

+0

일반 DOM 액세스에 이미 jQuery를 사용하고 있지만 특정 DOM 준비 작업을 올바르게 모듈화하기 위해 코드의 다른 부분에서 끝나는 방식으로 스크립트가 구성되어 있습니다. $ (function() {})을 제거 할 수 있다면 깨끗하게 보일 것입니다. 그러나 제거하는 것이 아무 것도 해칠 수 없다고 확신 할 때까지는 기꺼이하지 않을 것입니다. – Matchu

1

는 또 다른 이유가있다 스크립트를 끝까지 넣으면 브라우저는 이 아니며은 JS 파일을 병렬로로드합니다. JS 파일은 나중에 오는 모든 것에 영향을 미칠 수 있기 때문에 병렬로로드해야합니다. 사실 JS 파일이 다운로드되고 파싱 될 때까지 브라우저에서 모든 것이 멈 춥니 다. 텍스트, 이미지, 모든 것입니다. 따라서 일찍로드하지 않으면 페이지 끝 부분에 JS를로드하십시오.

+3

실제로 대부분의 최신 브라우저는 스크립트를 병렬로로드 할 수 있습니다. http://www.browserscope.org/?v=top&category=network 에서 차트를 볼 수 있지만 병렬로드로 인해 브라우저에서 언급 한 다른 문제는 해결되지 않습니다 스크립트가로드되고 실행될 때까지 파싱 및 렌더링을 중지하므로 스크립트를 맨 아래에 배치하는 것은 여전히 ​​건전한 조언입니다. – Annie

+0

@Annie : 링크를 제공해 주셔서 감사합니다.필자는 FF 3.5와 MSIE 8에서 병렬 스크립트 다운로드 문제를 해결했다는 것을 깨닫지 못했습니다. 둘 다 스크립트/스크립트와 스크립트/스타일 시트를 병렬로 다운로드하지만 스크립트/이미지는 다운로드하지 않습니다. 왜 그럴지 모른다고 생각 해요? –

관련 문제