jQuery-$ (document) .ready와 $ (window) .load의 차이점은 무엇입니까?

차이점은 무엇입니까

$(document).ready(function(){
 //my code here
});

과

$(window).load(function(){
  //my code here
});

그리고 나는 그것을 확인하고 싶다 :

$(document).ready(function(){

}) 

과

$(function(){

}); 

과

jQuery(document).ready(function(){

});

동일합니다.

그들 사이의 차이점과 유사점을 말해 줄 수 있습니까?

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("document is ready");
});


$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
  console.log("window is loaded");
});

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

쿼리 3.0 버전

주요 변경 사항 : .load (), .unload () 및 .error () 제거

이 메소드는 이벤트 조작에 대한 바로 가기이지만 몇 가지 API 제한 사항이 있습니다. 이벤트 .load()메소드가 ajax .load() 메소드 와 충돌했습니다 . .error()방법은 사용할 수 없습니다 수 window.onerror 있기 때문에 DOM 방법을 정의하는 방식. 당신이이 이름으로 이벤트를 연결해야하는 경우, 사용 .on()등 방법 변경 $("img").load(fn)에를 $(img).on("load", fn). ¹

$(window).load(function() {});

로 변경해야합니다

$(window).on('load', function (e) {})

이들은 모두 동등합니다 :

$(function(){
}); 

jQuery(document).ready(function(){
});

$(document).ready(function(){
});

$(document).on('ready', function(){
})

document.ready는 jQuery 이벤트이며 DOM이 준비되면 실행됩니다. 예를 들어 모든 요소를 ​​찾거나 사용하지만 반드시 모든 내용을 포함해야하는 것은 아닙니다.
window.onload이미지 등이로드되면 나중에 (또는 최악 / 실패한 경우 동시에) 실행됩니다. 예를 들어 이미지 크기를 사용하는 경우 종종이를 사용하려고합니다.

또한 관련 질문을 읽으십시오 :
$ (window) .load ()와 $ (document) .ready () 함수의 차이점

로부터 jQuery를 API 문서

JavaScript는 load페이지가 렌더링 될 때 코드 실행을위한 이벤트를 제공하지만 이 이벤트는 이미지와 같은 모든 자산이 완전히 수신 될 때까지 트리거되지 않습니다. 대부분의 경우 DOM 계층 구조가 완전히 구성 되 자마자 스크립트를 실행할 수 있습니다. 전달 된 핸들러 .ready()는 DOM이 준비된 후에 실행되도록 보장되므로 일반적으로 다른 모든 이벤트 핸들러를 첨부하고 다른 jQuery 코드를 실행하기에 가장 적합한 위치입니다. CSS 스타일 속성 값에 의존하는 스크립트를 사용하는 경우 스크립트를 참조하기 전에 외부 스타일 시트를 참조하거나 스타일 요소를 포함시키는 것이 중요합니다.

코드가로드 된 자산에 의존하는 경우 (예 : 이미지의 크기가 필요한 경우) load대신 이벤트 처리기에 코드를 배치해야합니다 .

두 번째 질문에 대한 답변-

아니오, 충돌 모드에서 jQuery를 사용하지 않는 한 동일합니다.

이 세 기능은 동일합니다.

$(document).ready(function(){

}) 

과

$(function(){

}); 

과

jQuery(document).ready(function(){

});

여기 $에 jQuerylike $= 정의에 사용됩니다 jQuery.

이제 차이점은

$(document).readyDOM로드 되면 시작되는 jQuery 이벤트 이므로 문서 구조가 준비되면 시작됩니다.

$(window).load 페이지 포함 이미지, CSS 등 전체 콘텐츠가로드 된 후 이벤트가 시작됩니다.

$(document).ready()와 $(window).load()기능 의 차이점 $(window).load()은 전체 이미지 (이미지, iframe, 스타일 시트 등) 가로 드되면 내부에 포함 된 코드 가 실행되는 반면 모든 이미지, iframe 등이로드되기 전에 문서 준비 이벤트가 시작되지만 전체 DOM 자체 후에 실행됩니다 준비되었다.

$(document).ready(function(){

}) 

과

$(function(){

});

과

jQuery(document).ready(function(){

});

위의 3 가지 코드에는 차이가 없습니다.

그것들은 동일하지만 다른 JavaScript 프레임 워크가 바로 가기 이름과 동일한 달러 기호 $ 를 사용하면 충돌이 발생할 수 있습니다 .

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

ready 이벤트는 항상 html 페이지가 브라우저에로드되고 기능이 실행되는 경우에만 항상 실행됩니다. 그러나 load 이벤트는 모든 페이지 내용이 페이지의 브라우저에로드 될 때 실행됩니다 ... .. jquery 스크립트에서 noconflict () 메소드를 사용할 때 $ 또는 jQuery를 사용할 수 있습니다 ...

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});

$ (window) .load 는 DOM과 페이지의 모든 내용 (모든 것)이 CSS, 이미지 및 프레임과 같이 완전히로드 될 때 발생하는 이벤트입니다. 가장 좋은 예는 실제 이미지 크기를 얻거나 사용하는 세부 정보를 얻는 것입니다.

$ (document) .ready () 는 DOM이로드되고 스크립트에 의해 조작 될 준비가되면 코드가 실행되어야 함을 나타냅니다. jQuery 스크립트를 실행하기 위해 이미지가로드 될 때까지 기다리지 않습니다.

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$ (document) .ready () 다음에 $ (window) .load가 시작되었습니다.

$(document).ready(function(){

}) 
//and 
$(function(){

}); 
//and
jQuery(document).ready(function(){

});

위의 3은 동일하며 $는 jQuery의 별칭 이름입니다. 다른 JavaScript 프레임 워크에서 동일한 달러 기호 $를 사용하면 충돌이 발생할 수 있습니다. 충돌이 발생하면 jQuery 팀은 더 이상 충돌하지 않는 솔루션을 제공합니다 .

$ (window) .load는 1.8에서 더 이상 사용되지 않으며 jquery 3.0에서 제거되었습니다.