jquery $(document).ready() 와 window.onload의 차이점-JS 튜토리얼-php.cn

Jquery의 $(document).ready() 함수는 기존 JavaScript의 window.onload 메서드와 유사하지만 여전히 window.onload 메서드와는 다릅니다.

1. 실행 시간

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

2.编写个数不同

window.onload불호동성 .ready()는 동일한 기능을 가지고 있습니다. 모두 실행할 수 있습니다

3. 단순화된 작성
window.onload를 작성하는 단순화된 방법은 없습니다
$(document).ready(function(){})는 $(function(){})로 축약될 수 있습니다.

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

코드는 다음과 같습니다.

$(document ).ready(function(){

...
});

이때 일부 메소드를 실행하기 전에 모든 js와 이미지가 로드될 때까지 기다릴 필요는 없습니다. 실행하기 전에 모든

요소가 로드될 때까지 기다려야 합니다. 예를 들어 일부 사진이나 기타 측면이 로드되지 않은 경우 이때 일부 버튼을 클릭하면 예상치 못한 상황이 발생할 수 있습니다. 다음을 사용해야 합니다:

코드는 다음과 같습니다:

$(window).load(function() {

$("#btn-upload").click(function(){ //예:

uploadPhotos ();

});
});

다음은 재현된 내용입니다.
body.onload() 대신 $(window).load(function(){...})를 사용하는 몇 가지 이유

우선 페이지의 모든 요소(

html 태그
및
quote모든 사진 가져오기, 플래시 및 기타 미디어 포함)는 로드 후에 실행되며, 이것이 공통점입니다.No body.Onload( ) 이유 1:

여러 함수를 동시에 로드하려면 다음과 같이 작성해야 합니다

$(window).load()를 사용하면 다음과 같은

코드와 같은 여러 함수를 로드할 수 있습니다.

});

$(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 코드 조각을 첨부합니다.

코드는 다음과 같습니다. l & lt; type = "text/javascript" & gt;

(function () {

warning ("dom이 아직 로드하지 않았습니다!);

}

& lt;/script & gt;

하하, 때로는 이게 필요해!

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

Window.load $(document).ready()
실행 타이밍 웹 페이지의 모든 콘텐츠(그림 포함)가 로드될 때까지 기다려야 웹 페이지의 모든 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 
});

로그인 후 복사

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

$ (window) .load (function () {
// 코드 작성}); 다음 코드는 javascript
window.onload = function () {
// 코드 작성}}

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

최근에는 프레임에 포함된 페이지를 변경할 때 jquery를 사용했습니다. 페이지 자체도 onload 이벤트에 바인딩됩니다. 수정 후 Firefox에서는 테스트가 정상적이고 원활하게 실행되지만, IE에서는 jquery 효과가 나타나기까지 10초 이상 걸리고, 원추리가 차갑습니다.

처음에는 온로드 로딩 방식과 충돌하는 줄 알았습니다. 인터넷에서는 $(document).ready()는 페이지 DOM 파싱이 완료된 후에 실행되고, onload 이벤트는 모든 리소스가 준비된 후에 실행된다는 것입니다. 즉, $(document).ready()입니다. 페이지 DOM 구문 분석이 완료된 후에 실행됩니다. 특히 페이지 그림이 더 크고 많을 경우 시간 차이가 더 커질 수 있습니다. 그런데 내 페이지에는 그림이 10초 이상 표시되었는데 아직 jquery 효과가 나타나지 않네요.

　 onload 로딩 메소드를 삭제해 보았지만 결과는 여전히 같습니다. 원래 onload 이벤트 바인딩을 작성하기 위해 $(document).ready()를 사용할 필요는 없는 것 같습니다. 그렇다면 Firefox는 작동하지만 IE는 작동하는 이유는 무엇입니까? 그런 다음 디버깅을 해보니 IE에서 원래 바인딩된 onload 메서드가 $(document).ready() 콘텐츠 이전에 실행된 반면 Firefox는 $(document).ready() 콘텐츠를 먼저 실행한 다음 원래 onload를 실행한 것으로 나타났습니다. 방법. . 이것은 온라인에서 말하는 것과 완전히 일치하지 않는 것 같습니다. 하하, 점점 진실에 가까워지고 있는 것 같습니다.

　jquery의 소스 코드를 살펴보고 $(document).ready()가 어떻게 구현되었는지 확인하세요.

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 );

로그인 후 복사

결과는 페이지가 프레임에 포함되지 않은 경우에만 Firefox와 동일합니다. $ (document).ready() 콘텐츠를 확인한 다음 원래 onload 메서드를 실행합니다. 프레임에 포함된 페이지의 경우 로드 이벤트에만 바인딩되어 실행되므로 자연스럽게 원래의 onload 바인딩 메서드가 실행된 다음 차례가 됩니다. 그리고 이 페이지에는 테스트 환경에서 접근할 수 없는 리소스가 있는데, 10초 이상의 지연이 바로 이것이 확대하는 시간 차이입니다.

위 내용은 jquery $(document).ready() 와 window.onload의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!