SeouliteLab

jQuery jQuery.holdReady() 메서드 이해하기: 문서 준비 이벤트 제어하기 본문

프로그래밍

jQuery jQuery.holdReady() 메서드 이해하기: 문서 준비 이벤트 제어하기

Seoulite Lab 2024. 4. 3. 08:17

jQuery.holdReady() 메서드는 jQuery에서 사용되며, 문서의 준비 이벤트를 제어하는 데 사용됩니다. 이를 통해 스크립트의 로딩을 조절하고 특정 이벤트가 발생할 때까지 스크립트 실행을 지연시킬 수 있습니다.

예제 1: 문서 준비 이벤트 지연하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery jQuery.holdReady() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 문서 준비 이벤트를 지연
    jQuery.holdReady(true);

    // 문서가 완전히 로드되면 실행
    $(document).ready(function(){
      alert("문서가 완전히 로드되었습니다.");
    });

    // 다른 이벤트 발생 후 문서 준비 이벤트 해제
    setTimeout(function(){
      jQuery.holdReady(false);
    }, 5000);
  </script>
</head>
<body>
  <h1>문서 준비 이벤트 제어 예제</h1>
</body>
</html>

설명: 이 예제에서는 문서의 준비 이벤트를 5초간 지연한 후 문서가 완전히 로드되었을 때 알림이 표시됩니다.

예제 2: 문서가 완전히 로드된 후 외부 스크립트 로드

<!DOCTYPE html>
<html>
<head>
  <title>jQuery jQuery.holdReady() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      alert("문서가 완전히 로드되었습니다.");
    });

    // 외부 스크립트 로드
    jQuery.holdReady(false);
  </script>
</head>
<body>
  <h1>문서 로드 후 스크립트 실행 예제</h1>
</body>
</html>

설명: 이 예제에서는 문서가 완전히 로드된 후에만 알림이 표시되며, 외부 스크립트도 로드됩니다.

예제 3: 문서 준비 이벤트 지연 후 외부 스크립트 로드

<!DOCTYPE html>
<html>
<head>
  <title>jQuery jQuery.holdReady() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 문서 준비 이벤트를 지연
    jQuery.holdReady(true);

    // 외부 스크립트 로드
    $.getScript("external_script.js", function(){
      alert("외부 스크립트가 로드되었습니다.");
    });

    // 문서가 완전히 로드되면 실행
    $(document).ready(function(){
      alert("문서가 완전히 로드되었습니다.");
    });

    // 다른 이벤트 발생 후 문서 준비 이벤트 해제
    setTimeout(function(){
      jQuery.holdReady(false);
    }, 5000);
  </script>
</head>
<body>
  <h1>문서 준비 이벤트 제어 및 외부 스크립트 로드 예제</h1>
</body>
</html>

설명: 이 예제에서는 문서의 준비 이벤트를 5초간 지연한 후 외부 스크립트가 로드되고 문서가 완전히 로드된 후에 알림이 표시됩니다.

예제 4: jQuery.holdReady()를 사용하여 외부 스크립트 로드 전 후 처리하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery jQuery.holdReady() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery

-3.6.0.min.js"></script>
  <script>
    // 문서 준비 이벤트를 지연
    jQuery.holdReady(true);

    // 외부 스크립트 로드
    $.getScript("external_script.js", function(){
      alert("외부 스크립트가 로드되었습니다.");
    });

    // 문서가 완전히 로드되면 실행
    $(document).ready(function(){
      alert("문서가 완전히 로드되었습니다.");
    });

    // 문서 준비 이벤트 해제
    $(window).on("load", function(){
      jQuery.holdReady(false);
    });
  </script>
</head>
<body>
  <h1>문서 준비 이벤트 제어 및 외부 스크립트 로드 예제</h1>
</body>
</html>

설명: 이 예제에서는 문서의 준비 이벤트를 외부 스크립트 로드 전 후에 각각 처리하고 있습니다.

예제 5: jQuery.holdReady()를 사용하여 외부 스크립트 로드 후 추가 작업 수행

<!DOCTYPE html>
<html>
<head>
  <title>jQuery jQuery.holdReady() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 문서 준비 이벤트를 지연
    jQuery.holdReady(true);

    // 외부 스크립트 로드
    $.getScript("external_script.js", function(){
      // 외부 스크립트 로드 후 추가 작업 수행
      alert("외부 스크립트가 로드되었습니다.");
      // 추가 작업 수행
      // ...
      // 문서 준비 이벤트 해제
      jQuery.holdReady(false);
    });
  </script>
</head>
<body>
  <h1>외부 스크립트 로드 후 추가 작업 예제</h1>
</body>
</html>

설명: 이 예제에서는 외부 스크립트가 로드된 후 추가 작업을 수행하고 문서의 준비 이벤트를 해제합니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery.ready() 메서드 이해하기: 문서 준비 이벤트 처리하기  (0) 2024.04.03
jQuery jQuery.proxy() 메서드 이해하기: 함수 컨텍스트 설정하기  (0) 2024.04.03
jQuery .hover() 메서드 이해하기: 요소에 마우스를 올렸을 때 처리하기  (0) 2024.04.03
jQuery .focusout() 메서드 이해하기: 요소가 포커스를 잃었을 때 처리하기  (0) 2024.04.03
jQuery .focusin() 메서드 이해하기: 요소에 포커스가 들어왔을 때 처리하기  (0) 2024.04.03
'프로그래밍' Related Articles more