jquery $(document).ready() 와 window.onload의 차이점
- 巴扎黑원래의
- 2017-06-25 10:11:021254검색
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(){})로 축약될 수 있습니다.
...
});
$(window).load(function() {
$("#btn-upload").click(function(){ //예:
uploadPhotos ();});
});
다음은 재현된 내용입니다.
body.onload() 대신 $(window).load(function(){...})를 사용하는 몇 가지 이유
html 태그
및
quote모든 사진 가져오기, 플래시 및 기타 미디어 포함)는 로드 후에 실행되며, 이것이 공통점입니다.No body.Onload( ) 이유 1:
});
$(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!