$(document).ready()jQuery 이벤트입니다. $(document).ready()DOM이 준비 되 자마자 JQuery의 메소드가 호출됩니다 (즉, 브라우저가 HTML을 구문 분석하고 DOM 트리를 빌드했음을 의미 함). 이를 통해 문서를 조작 할 준비가되는 즉시 코드를 실행할 수 있습니다.

예를 들어, 브라우저가 DOM이 아닌 많은 브라우저에서와 같이 DOMContentLoaded 이벤트를 지원하면 해당 이벤트에서 시작됩니다. DOMContentLoaded 이벤트는 IE9 +의 IE에만 ​​추가되었습니다.

이를 위해 두 가지 구문을 사용할 수 있습니다.

$( document ).ready(function() {
   console.log( "ready!" );
});

또는 속기 버전 :

$(function() {
   console.log( "ready!" );
});

주요 포인트 $(document).ready():

• 이미지가로드 될 때까지 기다리지 않습니다.
• DOM이 완전히로드 될 때 JavaScript를 실행하는 데 사용됩니다. 이벤트 핸들러를 여기에 넣으십시오.
• 여러 번 사용할 수 있습니다.
• 교체 $로 jQuery당신이받을 때 “$가 정의되지 않았습니다.”
• 이미지를 조작하려는 경우 사용되지 않습니다. $(window).load()대신 사용하십시오 .

window.onload()기본 JavaScript 함수입니다. 이 window.onload()이벤트는 DOM (문서 개체 모델), 배너 광고 및 이미지를 포함하여 페이지의 모든 콘텐츠가로드되면 시작됩니다. 이 둘의 또 다른 차이점 $(document).ready()은 하나 이상의 onload기능을 가질 수 있지만 하나의 기능 만 가질 수 있다는 것 입니다.

답변

$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

window.addEventListener('load', function () {
  alert('Hello!')
})

window.addEventListener('load', function () {
  alert('Bye!')
})

window.onload = function () {
  alert('Hello!') // it will not work!!!
}

window.onload = function () {
  alert('Bye!')
}