jquery event_jquery의 Ready() 메소드 사용에 대한 자세한 설명

페이지 초기화에서 $(document).ready(function(){//code}) 또는 $(window).load(function(){//code});

두 가지의 차이점은 DOM 구조가 로드된 후에 Ready가 트리거되고, 페이지의 DOM 구조, CSS, JS, 이미지 등이 로드된 후에 로드가 트리거된다는 점입니다. 당연히 페이지 초기화에는 Ready가 더 적합합니다. . 그러나 때로는 항상 그런 것은 아닙니다. 내부 메커니즘을 더 자세히 살펴볼 필요가 있습니다.

그렇다면 Ready는 DOM 구조가 로드되었는지 내부적으로 어떻게 결정합니까? 그리고 다른 브라우저는 이를 어떻게 판단합니까?

jquery 버전이 jquery-1.11.3.js라고 가정할 때 답은 jquery 코드 내에 있습니다.

ready의 키 코드(3507~3566행), 빨간색으로 표시된 키 코드:

jQuery.ready.promise = function( obj ) {
  if ( !readyList ) {

    readyList = jQuery.Deferred();

    // Catch cases where $(document).ready() is called after the browser event has already occurred.
    // we once tried to use readyState "interactive" here, but it caused issues like the one
    // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
    if ( document.readyState === "complete" ) {
      // Handle it asynchronously to allow scripts the opportunity to delay ready
      setTimeout( jQuery.ready );

    // Standards-based browsers support DOMContentLoaded
    } else if ( document.addEventListener ) {
      // Use the handy event callback
      document.addEventListener( "DOMContentLoaded", completed, false );

      // A fallback to window.onload, that will always work
      window.addEventListener( "load", completed, false );

    // If IE event model is used
    } else {
      // Ensure firing before onload, maybe late but safe also for iframes
      document.attachEvent( "onreadystatechange", completed );

      // A fallback to window.onload, that will always work
      window.attachEvent( "onload", completed );

      // If IE and not a frame
      // continually check to see if the document is ready
      var top = false;

      try {
        top = window.frameElement == null && document.documentElement;
      } catch(e) {}

      if ( top && top.doScroll ) {
        (function doScrollCheck() {
          if ( !jQuery.isReady ) {

            try {
              // Use the trick by Diego Perini
              // http://javascript.nwbox.com/IEContentLoaded/
              top.doScroll("left");
            } catch(e) {
              return setTimeout( doScrollCheck, 50 );
            }

            // detach all dom ready events
            detach();

            // and execute any waiting functions
            jQuery.ready();
          }
        })();
      }
    }
  }
  return readyList.promise( obj );
};

위 코드는 Ready가 실행될 때 두 부분으로 나눌 수 있습니다

1. 표준 브라우저에서 실행

브라우저가 표준 브라우저를 기반으로 하는 경우 DOM 구조를 로드한 후 "DOMContentLoaded" 이벤트가 트리거됩니다. jquery는 내부적으로 이 이벤트를 준비 트리거 소스로 사용합니다.

document.addEventListener( "DOMContentLoaded", completed, false );

2. IE 브라우저에서 실행

브라우저가 IE인 경우 IE(너무 힘들고 강력함)는 "DOMContentLoaded" 이벤트를 지원하지 않기 때문에 다른 방법을 찾아야 합니다.

        (function doScrollCheck() {
          if ( !jQuery.isReady ) {

            try {
              // Use the trick by Diego Perini
              // http://javascript.nwbox.com/IEContentLoaded/
              top.doScroll("left");
            } catch(e) {
              return setTimeout( doScrollCheck, 50 );
            }

            // detach all dom ready events
            detach();

            // and execute any waiting functions
            jQuery.ready();
          }
        })();

IE에서의 방법은 위 코드의 빨간색 텍스트에 있는 "document.documentElement.doScroll("left")" 메서드를 사용하여 페이지를 스크롤하는 것입니다. 로드되지 않으면 50밀리초 동안 기다렸다가 계속 스크롤합니다. 스크롤될 때까지 트리거가 준비됩니다.

그러나 페이지에 프레임이 있으면 window.onload 이벤트가 준비 트리거 소스로 사용됩니다.

따라서 IE에서는 페이지에 프레임이 있으면 페이지의 모든 콘텐츠가 로드될 때까지 준비가 트리거되지 않습니다.

jQuery에서 준비 이벤트와 로드 이벤트의 차이점

직장에서 jQuery를 사용할 때는 사용하기 전에 다음을 수행해야 합니다.

//document ready
$(document).ready(function(){
  ...code...
})
//document ready 简写
$(function(){
  ...code...
})

다음과 같이 쓰는 경우도 있습니다.

//document load
$(document).load(function(){
  ...code...
})

하나는 준비되어 있고 하나는 로드되어 있는데 둘의 차이점은 무엇인가요? 오늘 이야기합시다.
준비 또는 로드 중 어느 것이 먼저 실행됩니까?

인터뷰 과정에서 다들 'Ready와 Load 중 어느 것이 먼저 실행되고, 어느 것이 나중에 실행되나요?'라는 질문을 자주 받습니다. 대답은 Ready가 먼저 실행되고 load가 나중에 실행된다는 것입니다.
DOM 문서 로드 단계:

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

(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load

위의 설명을 통해 (4)단계가 완료된 후에 Ready가 실행된다는 점을 이해하셨을 것입니다. 그러나 (6)단계가 완료될 때까지 로드는 실행되지 않습니다.

준비된 이벤트:

ready 이벤트는 DOM 구조가 그려진 후에 실행됩니다. 이렇게 하면 많은 수의 미디어 파일이 로드되지 않더라도 JS 코드가 계속 실행될 수 있습니다.

로드 이벤트:

load 이벤트는 실행되기 전에 웹페이지의 모든 콘텐츠가 로드될 때까지 기다려야 합니다. 웹 페이지에 많은 수의 이미지가 있는 경우 이러한 상황이 발생합니다. 웹 페이지 문서가 렌더링되었지만 웹 페이지 데이터가 완전히 로드되지 않았기 때문에 로드 이벤트가 즉시 트리거될 수 없습니다.

요약:

ready와 load의 차이점은 이미 다들 알고 계시리라 생각합니다. 사실 페이지에 사진과 같은 미디어 파일이 없으면 Ready와 load는 거의 같지만, 페이지에 파일이 있으면 다릅니다. , 따라서 모두가 중국어로 Ready를 사용하여 작업하는 것이 좋습니다.