jquery $(document).ready() 와 window.onload_jquery의 차이점

1. 실행 시간

​ ​ ​ window.onload는 실행되기 전에 이미지를 포함한 페이지의 모든 요소가 로드될 때까지 기다려야 합니다.
​​​​ $(document).ready()는 DOM 구조가 그려진 후 로드될 때까지 기다리지 않고 실행됩니다.

2. 쓰기 횟수가 다릅니다

Window.onload는 동시에 여러 개를 쓸 수 없습니다. Window.Onload 메서드가 여러 개인 경우
하나만 작성하세요. ​​​​​ $(document).ready() 는 동시에 여러 번 작성할 수 있으며 모두 실행 가능합니다

3. 단순화된 글쓰기

window.onload에 대한 간단한 작성 방법이 없습니다
            $(document).ready(function(){})는 $(function(){});

으로 축약될 수 있습니다.

이전 개발에서는 주로 JavaScript를 사용했고 항상 jquery 모드를 사용했습니다. 즉, 대부분의 경우 첫 번째 줄은 다음과 같습니다.

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

$(문서).ready(함수(){
...
});

현재 일부 메서드를 실행하기 전에 모든 js와 이미지가 로드될 때까지 기다릴 필요는 없지만 때로는 모든 js와 이미지가 로드될 때까지 기다려야 할 때도 있습니다.

모든 요소가 로드되면 일부 메소드가 실행될 수 있습니다. 예를 들어, 일부 사진이나 기타 측면은 이때 일부 버튼을 클릭하면 예상치 못한 상황이 발생할 수 있습니다.

사용해야 할 사항:

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

$(window).load(function() {
$("#btn-upload").click(function(){ //예:
uploadPhotos();
});
});

재현된 내용은 다음과 같습니다.

body.onload()
대신 $(window).load(function(){...})를 사용하는 몇 가지 이유 우선, 페이지의 모든 요소(html 태그 및 모든 참조 이미지, 플래시 및 기타 미디어 포함)가 로드된 후에 실행됩니다.

body.Onload()를 사용하지 않는 이유 1:

여러 함수를 동시에 로드하고 싶다면 이렇게 작성해야 합니다

ed5cb0397b63c7a89b89c225a7d5c20b36cc49f0c466276486e50c850b7e4956 $(window).load()를 사용하면 이와 같은 여러 함수를 로드할 수 있습니다

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

$(window).load(function() {
Alert("안녕하세요, jQuery입니다!");
});
$(window).load(function() {
Alert("안녕하세요, 저도 jQuery입니다.");
});

이렇게 작성하면 이 두 가지 기능을 위에서 아래로 실행하게 되는데 훨씬 더 예뻐보이네요.

body.Onload()를 사용하지 않는 이유 2:

body.Onload()를 사용하면 js와 html을 완전히 분리할 수 없습니다. 이는 매우 심각한 문제입니다.

또한 $(window).load(function(){...}) 및 body.onload()를 사용하면 동일한 문제가 발생합니다. 왜냐하면 처음에 언급했듯이 둘 다 모든 콘텐츠가 끝날 때까지 기다려야 하기 때문입니다. 페이지 중

을 사용할 수 있습니다.

로딩이 완료된 후 실행되지만 네트워크 속도가 상대적으로 느린 경우 페이지를 로드하는 데 시간이 오래 걸리는 경우가 많습니다(몇 초에서 10초 이상 또는 그 이상...). 그래서 우리는 종종

페이지가 완전히 로드되지 않은 상태에서 사용자가 이미 페이지를 운영하고 있는 상황이 발생하게 되어 페이지 효과가 예상과 다를 수 있습니다.

여기서 $(document).ready(function(){}) 또는 약어로 $(function(){})을 사용하는 것이 좋습니다. 페이지의 DOM 요소가 로드된 후에 실행되기 때문입니다.

이미지나 기타 미디어가 다운로드될 때까지 기다릴 필요가 없습니다.

그러나 때로는 실행하려는 함수를 실행하기 전에 페이지의 모든 내용이 로드될 때까지 기다려야 하므로 $(window).load(function(){...}) 또는

을 사용해야 합니다.

$(function(){})을 사용하려면 특정 요구 사항에 따라 다른 선택이 필요한 경우가 많습니다.

마지막으로 모든 DOM 요소가 로드되기 전에 실행되는 jQuery 코드 조각을 첨부합니다

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

4ec11beb6c39d0703d1751d203c17053
(함수() {
Alert("DOM이 아직 로드되지 않았습니다!");
          })(jQuery)

하하, 가끔은 이런 게 필요할 때도 있어요!

문서를 로드하는 브라우저를 예로 들면, 페이지가 로드된 후 브라우저는 Javascript를 통해 DOM 요소에 이벤트를 추가합니다. 일반 Javascript 코드에서는 주로 window.onload 메서드를 사용하지만 Jquery에서는 $(document).ready() 메서드를 사용합니다. $(document).ready() 메소드는 이벤트 모듈에서 가장 중요한 기능으로 웹 애플리케이션의 속도를 크게 향상시킬 수 있습니다.

window.load $(document).ready()
실행 타이밍: 실행하기 전에 웹 페이지의 모든 콘텐츠(이미지 포함)가 로드될 때까지 기다려야 합니다. 웹 페이지의 모든 DOM 구조가 그려진 후에 실행이 발생합니다. DOM 요소와 관련된 콘텐츠가 로드되지 않았을 수 있습니다.
작성할 항목 수
을 동시에 여러 개 작성할 수 없습니다. 다음 코드는 올바르게 실행되지 않습니다:

window.onload = function(){ 
  alert(“text1”); 
}; 
window.onload = function(){ 
  alert(“text2”); 
}; 

두 번째 결과만 출력됩니다.
을 동시에 작성할 수 있습니다. 다음 코드는 올바르게 실행됩니다.

$(document).ready(function(){ 
  alert(“Hello World”); 
}); 
$(document).ready(function(){ 
  alert(“Hello again”); 
}); 

결과가 두 번 출력됩니다
단순화된 글쓰기 없음

 $(function(){ 
  // do something 
}); 

또한, DOM이 준비된 동안에는 $(document).ready() 메소드에 등록된 이벤트가 실행되기 때문에 이때 해당 요소의 관련 파일이 다운로드되지 않을 수도 있다는 점 유의하시기 바랍니다. . 예를 들어, 이미지와 관련된 html을 다운로드하여 DOM 트리로 파싱했지만, 이미지가 아직 로드되지 않았을 가능성이 높으므로 이때 이미지의 높이, 너비 등의 속성이 유효하지 않을 수 있습니다. 시간. 이 문제를 해결하려면 Jquery의 또 다른 페이지 로드 방법인 load() 메서드를 사용할 수 있습니다. Load() 메서드는 핸들러 함수를 요소의 onload 이벤트에 바인딩합니다. 핸들러 함수가 창 개체에 바인딩된 경우 모든 콘텐츠(창, 프레임, 개체, 이미지 등 포함)가 로드된 후에 트리거됩니다. 요소의 콘텐츠가 로드됩니다.
Jquery 코드는 다음과 같습니다.
$(window).load(함수 (){
//코드 작성
}); JavaScript의 다음 코드와 동일합니다
Window.onload = 함수(){
//코드 작성
}

————————————————————————————

최근 프레임에 포함된 페이지를 변경할 때 효과를 위해 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를 실행한 것으로 나타났습니다. 방법. . 이것은 온라인에서 말하는 것과 완전히 일치하지 않는 것 같습니다. 하하, 점점 진실에 가까워지고 있는 것 같습니다.

$(document).ready()가 어떻게 구현되는지 보려면 jquery의 소스 코드를 살펴보세요.

if ( jQuery.browser.msie && window == top ) (function(){ 
if (jQuery.isReady) return; 
try { 
document.documentElement.doScroll("left"); 
} catch( error ) { 
　　　　　　setTimeout( arguments.callee, 0 ); 
　　　　　　 return; 
　　　　} 
　　 // and execute any waiting functions 
　　　jQuery.ready(); 
})(); 
jQuery.event.add( window, "load", jQuery.ready ); 

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