jQuery의 준비 및 로드 이벤트

jQuery의 준비 및 로드 이벤트(MOOC.com에서)

jQuery에는 문서를 로드하는 3가지 메서드가 있습니다.

$(document).ready(function() { // . .. code... }) //문서 준비 약어 $(function() { // ...code... }) $(document).load(function() { // ...code... })

하나는 준비, 하나는 로드인데 둘의 차이점은 무엇인가요?

Ready 또는 Load 중 어느 것이 먼저 실행되는지:
면접 과정에서 우리는 종종 질문을 받습니다. Ready 또는 Load 중 어느 것이 먼저 실행되고, 어느 것이 마지막으로 실행됩니까? 대답은 Ready가 먼저 실행되고 load가 나중에 실행된다는 것입니다.

DOM 문서 로드 단계:
ready가 먼저 실행되고 로드가 나중에 실행되는 이유를 이해하려면 먼저 DOM 문서 로드 단계를 이해해야 합니다.

(1) Parse HTML 구조. (2) 외부 스크립트 및 스타일 시트 파일을 로드합니다. (3) 스크립트 코드를 분석하고 실행합니다. (4) HTML DOM 모델을 구축합니다. //ready (5) 이미지 등 외부 파일을 로드합니다. (6) 페이지가 로드됩니다. //load

위의 설명을 보면 4번 단계가 완료된 후에 Ready가 실행되지만, 6번 단계가 완료될 때까지 Load는 실행되지 않는다는 것을 이해해야 합니다.

결론:

ready와 load의 차이점은 리소스 파일을 로드하는 데 있습니다. Ready는 기본 DOM 구조를 구축하므로 코드를 빠르게 로드할수록 좋습니다. 고속 브라우징 시대에는 누구도 답변을 기다리고 싶어하지 않습니다. 웹 사이트 페이지가 4초 이상 로드되면 사용자 중 1/4이 손실을 입게 되므로 DOM을 빨리 처리할수록 기다릴 필요가 없습니다. 모든 리소스가 로드된 후에만 프레임 로드를 처리합니다. 이미지 리소스가 너무 많으면 오랫동안 로드 이벤트가 발생하지 않습니다.

jQuery의 준비는 jQuery가 잘하는 기술이기도 한 promise를 통해 패키징되어 콜백을 통합했습니다. 나중에 집중적으로 다루겠습니다.

jQuery 호환성을 위한 구체적인 전략을 볼 수 있습니다. 고급 브라우저의 경우 현재 시간과 노력을 절약할 수 있는 DOMContentLoaded 이벤트를 사용하게 되어 기쁩니다.

그럼 기존 IE는 어떻게 해야 할까요?

계속해서 jQuery 솔루션을 살펴보세요.

// 온로드 전에 실행을 확인하세요. 늦을 수도 있지만 iframe에도 안전합니다. document.attachEvent( "onreadystatechange",complete) // 다음으로 대체됩니다. window.onload는 항상 작동합니다. window.attachEvent( "onload",complete); // 프레임이 아닌 IE인 경우 // 문서가 준비되었는지 계속 확인합니다. var top = false; == NULL && DOCUMENT.DOCUMENTELEMENT;} Catch (E) {} if (Top && Top.doscroll) {(Function Doscrollcheck () {if (! jQuery.isready) {시도 {// Diego Perini의 트릭을 사용하세요 // http: //javascript.nwbox.com/IEContentLoaded/                                                                                    > 대기 함수 jQuery.ready(); DOM 트리가 로드되었습니다. 그러나 이 이벤트는 신뢰성이 매우 낮습니다. 예를 들어 페이지에 이미지가 있는 경우 onload 이벤트 후에 트리거될 수 있습니다. 즉, 페이지에 바이너리 리소스가 없거나 거의 없는 경우에만 올바르게 실행될 수 있습니다. 백업으로 캐시되어 있습니다.

IE 로딩 감지

Diego Perini는 2007년에 doScroll 메소드 호출을 사용하여 IE가 로드되었는지 감지하는 방법을 보고했습니다. 자세한 내용은 http://Javascript.nwbox.com/IEContentLoaded/를 참조하세요.
IE가 iframe이 아닌 환경에 있을 때 doScroll 실행 가능 여부에 의해서만 DOM 로드 여부를 지속적으로 판단할 수 있다는 것이 원칙입니다. 위의 간격으로 50밀리초마다 doScroll을 실행해 보세요. 페이지가 로드되지 않을 때 doScroll을 호출하면 예외가 발생하므로 예외를 포착하기 위해 try -catch가 사용됩니다.
결론: 따라서 일반적으로 페이지 DOM이 로드되지 않은 경우 doScroll 메서드를 호출하면 예외가 생성됩니다. 그런 다음 이를 반대로 사용합니다. 예외가 없으면 페이지 DOM이 로드된 것입니다.

처음으로 Ready Loading을 처리할 때 발생하는 문제입니다. 페이지가 로드된 후 Ready가 되면 어떻게 될까요?

이 상황에서는 jQuery가 바인딩을 건너뛰어야 합니다.

if ( document.readyState === "complete" ) { // 스크립트가 준비를 지연할 수 있도록 비동기적으로 처리합니다. setTimeout( jQuery. Ready ) }

ReadyState 상태를 확인하여 페이지 로딩이 바로 완료되었는지 판단합니다. 여기서는 주로 올바른 실행을 보장하기 위해 최소 시간 후에 실행되도록 타이머가 제공됩니다.

위 내용은 jQuery의 Ready 및 Load 이벤트 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!