언제 $ (document) .ready를 사용해야합니까?

Question

$(document).ready(..)은 자바 스크립트 효과 적용시 눈에 띄는 지연이 있음을 확인했습니다. 그러나 DOM이 준비되지 않았기 때문에 <script>에있는 것만으로는 효과가 없을 수 있음을 이해합니다.

항상 코드를 $(document).ready에 넣어야하며 언제 글로벌 <script> 태그로 가져 오시겠습니까?

Answer 1

사용해야 할 때와 사용하지 말아야 할 때를위한 규칙이 없습니다. 그 대답은 코드가 실행될 때 존재하지 않는 DOM의 일부를 트래버스해야하는지 여부에 있습니다. ID로 요소를 찾으려면 코드를 실행하기 전에 DOM을 빌드 할 수 있도록이 코드를 사용하면됩니다. DOM에 대해 신경 쓰지 않는다면 DOM을 사용하지 않아도됩니다.

다른 방법은 스크립트 태그를 body 태그의 맨 아래로 이동하여 DOM이로드 된 후에 스크립트 태그가 실행되도록하는 것입니다. 이 방법을 사용하는 데 큰 장점이나 단점은 없지만 코드를 체계적으로 유지하는 것이 더 어려워집니다. $ (document) .ready()를 사용하면 필요한 경우에도 자바 스크립트를 페이지의 머리 부분에 보관할 수 있습니다. 끝에서 실행하십시오.

Answer 2

DOM (즉, 모든 태그 또는 요소)에서 작업하려면 DOM이 준비되어 있는지 확인하십시오. 이로 인해 지연이 발생하면 더 간단하거나 작은 페이지를 만들어 더 빨리로드하는 것이 좋습니다. 단순한 $(document).ready() 기능은 페이지가 시각적으로 렌더링되기 전에 종종 수행됩니다.

Answer 3

코드가 일 때 준비가 완료되면 $(document).ready(func) 또는 단지 $(func)을 사용하십시오. 선택자를 사용하여, 그 때 의 요소를 어지럽히는 것과 관련된 것은입니다.

코드에 요소가 필요하지 않은 경우 ... 예 : 플러그인을 정의 (사용하지 않고 정의)하고 아무것도 포장하지 마십시오.

및 이미지로드/준비가 필요하면 대신 $(window).load(func)을 사용하십시오.

Answer 4

내가 잘못 아니에요 경우, $ (문서) .ready (..) 함수는 DOMContentLoaded에서 실행해야하고, Load 이벤트가 발생 될 때까지 기다릴 :

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

다른 한편으로 손으로, $ (document) .load (..)는 DOM이 렌더링되고 모든 애셋이로드되면 실행됩니다. 이는 페이지의 애셋 속성 (예 : 이미지 크기)에 의존 할 때 유용합니다.

페이지의 <script> 태그에 $(document).load(..) 함수가 있습니까? 아니면 페이지에서 참조하는 외부 JS 파일에 있습니까? 후자의 경우 지연은 부분적으로 스크립트 파싱으로 인한 것일 수 있습니다.

페이지 하단에 글로벌 <script> 태그를 넣고 두 번 다른 시나리오로 실행 해 보았습니다. 한 번만 $(document).load(..) 함수를 사용하고 대신 스크립트 태그의 load 함수 내용을 사용하십시오 . 이 두 가지 경우에서 실행되는 JS 효과에 중요한 차이가 있습니까?