jquery의 $(document).ready() 및 onload_javascript 기술 로드 순서

최근 프레임에 포함된 페이지를 수정할 때 효과를 위해 jquery를 사용했는데, 페이지 자체도 onload 이벤트에 바인딩되어 있었습니다. 수정 후 Firefox에서는 테스트가 정상적이고 원활하게 실행되지만, IE에서는 jquery 효과가 나타나기까지 10초 이상 걸리고, 원추리가 차갑습니다.

처음에는 onload 방식과 충돌하는 줄 알았습니다. 인터넷에서는 $(document).ready() 는 페이지 DOM 파싱이 완료된 후에 실행되고, onload 이벤트는 모든 리소스가 준비된 후에 실행된다는 것입니다. 즉, $(document).ready() 입니다. 페이지 DOM 구문 분석이 완료된 후에 실행됩니다. 특히 페이지 그림이 더 크고 많을 경우 시간 차이가 더 커질 수 있습니다. 그런데 내 페이지에는 그림이 10초 이상 표시되었는데 아직 jquery 효과가 나타나지 않네요.

onload 로딩 메소드를 삭제해 보았지만 결과는 여전히 같습니다. 원래 onload 이벤트 바인딩을 작성하기 위해 $(document).ready()를 사용할 필요는 없는 것 같습니다. 그렇다면 Firefox는 작동하지만 IE는 작동하는 이유는 무엇입니까? 그런 다음 디버깅을 해보니 IE에서 원래 바인딩된 onload 메서드가 $(document).ready() 콘텐츠 이전에 실행된 반면 Firefox는 $(document).ready() 콘텐츠를 먼저 실행한 다음 원래 onload를 실행한 것으로 나타났습니다. 방법. . 이것은 온라인에서 말하는 것과 완전히 일치하지 않는 것 같습니다. 하하, 점점 진실에 가까워지고 있는 것 같습니다.

jquery의 소스 코드를 통해 $(document).ready()가 어떻게 구현되는지 확인하세요.

코드 복사 코드는 다음과 같습니다.

if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {
document.documentElement.doScroll("left");
} catch( error ) {
　　setTimeout(args.callee, 0 );
　　}
　 / / 대기 중인 함수를 실행합니다.
　jQuery.ready();
})()
jQuery.event.add( window, "load", jQuery.ready )

🎜>결과 IE도 Firefox처럼 먼저 $(document).ready()의 내용을 실행한 다음 페이지가 프레임에 포함되지 않은 경우에만 원래의 onload 메서드를 실행하는 것이 분명합니다. 프레임에 포함된 페이지의 경우 로드 이벤트에만 바인딩되어 실행되므로 자연스럽게 원래의 onload 바인딩 메서드가 실행된 다음 차례가 됩니다. 그리고 이 페이지에는 우연히 테스트 환경에서 접근할 수 없는 리소스가 있는데, 10초 이상의 지연이 바로 그것이 증폭시키는 시간차이다.

저자: Joyce Liu