JavaScript window.onload
와 jQuery $(document).ready()
방법 의 차이점은 무엇입니까 ?
$().ready()
하는 방식 window.onload
은 때때로 실행됩니다.
JavaScript window.onload
와 jQuery $(document).ready()
방법 의 차이점은 무엇입니까 ?
$().ready()
하는 방식 window.onload
은 때때로 실행됩니다.
답변:
ready
HTML 문서가로드 된 후 동안 이벤트가 발생 onload
모든 컨텐츠 (예 : 이미지)도로드 된 경우 이벤트가 나중에 발생합니다.
onload
그동안 이벤트는 DOM의 표준 이벤트 ready
이벤트가 jQuery를 특정입니다. 이 ready
이벤트 의 목적은 문서가로드 된 후 가능한 빨리 발생하므로 페이지의 요소에 기능을 추가하는 코드가 모든 내용이로드 될 때까지 기다릴 필요가 없다는 것입니다.
ready
이벤트 는 jQuery에만 해당됩니다. DOMContentLoaded
브라우저에서 이벤트를 사용할 수 있으면 이벤트를 사용하고 , 그렇지 않으면 에뮬레이션합니다. DOMContentLoaded
이벤트가 모든 브라우저에서 지원되는 것은 아니기 때문에 DOM에는 정확히 동등한 것이 없습니다.
onload
. 이벤트가 트리거 onload
될 때 호출 할 함수를 저장하는 오브젝트 특성의 이름입니다 load
.
window.onload
는 기본 제공 자바 스크립트 이벤트이지만, 구현시 브라우저 (Firefox, Internet Explorer 6, Internet Explorer 8 및 Opera )에서 미묘한 차이 가 있으므로 jQuery는 이를 추상화하고 페이지의 DOM이 준비 되 자마자 실행됩니다. (이미지 등을 기다리지 않습니다).document.ready
$(document).ready
(그것의주의 하지 document.ready
정의되어 있지 않습니다) JQuery와 기능, 포장 및 제공 의 일관성을 다음 이벤트에 :
document.ondomcontentready
/ document.ondomcontentloaded
-문서의 DOM이로드 될 때 발생하는 새로운 이벤트 ( 이미지 등이로드 되기 까지 다소 시간이 걸릴 수 있음 ); 다시 말하지만 Internet Explorer와 다른 국가에서는 약간 다릅니다.window.onload
(심지어 오래된 브라우저에서 구현되는)하는 화재 때 전체 페이지가로드 (이미지, 스타일 등)load
이벤트는 window
브라우저에서 일관되게 일관되게 구현됩니다. jQuery와 다른 라이브러리가 해결하려고하는 문제는 언급 한 것입니다. 즉 load
이미지 및 스타일 시트와 같은 모든 종속 리소스가로드 될 때까지 이벤트가 시작되지 않으며 DOM이 완전히로드 된 후 오랜 시간이 걸릴 수 있습니다. 렌더링되고 상호 작용할 준비가되었습니다. DOM이 준비 될 때 대부분의 브라우저에서 발생하는 이벤트가 DOMContentLoaded
아니라 호출 DOMContentReady
됩니다.
onload
FF / IE / Opera 와의 차이가 있더라도 적어도 일부 객체 스니핑이 필요했습니다 . 에 관해서는 DOMContentLoaded
, 당신은 전적으로 정확합니다. 명확히하기 위해 편집.
document.onload
것이 가능했습니다). window.onload가 진행되는 한 : window.onload = fn1;window.onload=fn2;
-fn2 만 onload를 호출합니다. 일부 무료 웹 호스트는 자체 코드를 문서에 삽입하고 때로는 인 페이지 코드를 혼란스럽게 만들었습니다.
$(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()
:
$
로 jQuery
당신이받을 때 "$가 정의되지 않았습니다."$(window).load()
대신 사용하십시오 . window.onload()
기본 JavaScript 함수입니다. 이 window.onload()
이벤트는 DOM (문서 개체 모델), 배너 광고 및 이미지를 포함하여 페이지의 모든 콘텐츠가로드되면 시작됩니다. 이 둘의 또 다른 차이점 $(document).ready()
은 하나 이상의 onload
기능을 가질 수 있지만 하나의 기능 만 가질 수 있다는 것 입니다.
Windows로드 페이지의 모든 내용이 완전히 DOM (문서 객체 모델) 내용을 포함한로드 이벤트가 발생 비동기 자바 스크립트 , 프레임과 이미지 . body onload =를 사용할 수도 있습니다. 둘 다 동일합니다. window.onload = function(){}
와 <body onload="func();">
같은 이벤트를 사용하여 여러 가지 방법이 있습니다.
jQuery$document.ready
함수 이벤트는 조금 더 일찍 실행 window.onload
되며 DOM (Document Object Model)이 페이지에로드되면 호출됩니다. 이미지, 프레임이 완전히로드 될 때까지 기다리지 않습니다 .
다음 문서에서 발췌 :
어떻게 $document.ready()
다른window.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>
$(document).ready()
Internet Explorer와 함께 사용할 때주의해야 할 사항입니다 . 전체 문서가로드 되기 전에 HTTP 요청이 중단되면 (예 : 페이지가 브라우저로 스트리밍되는 동안 다른 링크가 클릭 됨) IE가 $(document).ready
이벤트 를 트리거합니다 .
$(document).ready()
이벤트 내의 코드가 DOM 객체를 참조하는 경우 해당 객체를 찾지 못할 가능성이 있으며 Javascript 오류가 발생할 수 있습니다. 해당 객체에 대한 참조를 보호하거나 해당 객체를 참조하는 코드를 window.load 이벤트로 연기하십시오.
다른 브라우저 (특히 Chrome 및 Firefox)에서이 문제를 재현 할 수 없었습니다.
항상window.addEventListener
창을 사용하여 이벤트를 추가하십시오. 그렇게하면 다른 이벤트 핸들러에서 코드를 실행할 수 있습니다.
올바른 코드 :
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!')
}
이것은 onload가 단지 객체의 속성이기 때문에 덮어 쓰기 때문입니다.
와 유추하여 onload보다는 addEventListener
사용하는 $(document).ready()
것이 좋습니다.
$(document).on('ready', handler)
jQuery에서 준비된 이벤트에 바인딩합니다. 핸들러는 DOM이로드 될 때 호출 됩니다 . 이미지 와 같은 자산이 여전히 누락되었을 수 있습니다. 바인딩 할 때 문서가 준비된 경우 호출되지 않습니다. jQuery는 DOMContentLoaded -Event를 사용하여 사용할 수없는 경우 에뮬레이션합니다.
$(document).on('load', handler)
서버에서 모든 리소스가로드 되면 시작되는 이벤트입니다 . 이미지가로드되었습니다. 하지만 온로드는 원시 HTML 이벤트는, 준비 jQuery를에 의해 만들어집니다.
$(document).ready(handler)
실제로는 약속 입니다. 호출 시점에 문서가 준비되면 핸들러가 즉시 호출됩니다. 그렇지 않으면 ready
-Event에 바인드됩니다 .
jQuery를 1.8 전에 , $(document).load(handler)
별칭으로 존재 $(document).on('load',handler)
.
$.fn.load
더 이상 이벤트 바인더로 행동하지 않는다고 혼동했다고 생각합니다 . 실제로 jquery 1.8 이후로 폐기되었습니다. 이에 따라 업데이트했습니다
는 $(document).ready()
A는 의 jQuery 그동안, HTML 문서가 완전히로드 된 때 발생하는 이벤트 window.onload
페이지에있는 모든 것을 포함하여 이미지를로드 할 때 이벤트가 나중에 발생합니다.
또한 window.onload는 DOM의 순수 자바 스크립트 이벤트이며 $(document).ready()
이벤트는 jQuery의 메소드입니다.
$(document).ready()
일반적으로 jQuery에서 래퍼로로드되어 모든 요소가 jQuery에서 사용되도록합니다.
작동 방법을 이해하려면 jQuery 소스 코드를 살펴보십시오.
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here, but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready );
// Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed, false );
// If IE event model is used
} else {
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", completed );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", completed );
// If IE and not a frame
// continually check to see if the document is ready
var top = false;
try {
top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) {
(function doScrollCheck() {
if ( !jQuery.isReady ) {
try {
// Use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
}
// detach all dom ready events
detach();
// and execute any waiting functions
jQuery.ready();
}
})();
}
}
}
return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
// Add the callback
jQuery.ready.promise().done( fn );
return this;
};
또한 아래 이미지를 모두 빠른 참조로 만들었습니다.
기억해야 할 한 가지는 기억할 수 있다는 것 onload
입니다 ready
. 즉, jQuery magic은 ready
같은 페이지에 여러 개의을 허용 하지만으로 할 수는 없습니다 onload
.
마지막 onload
은 이전 onload
의 모든 것을 우선합니다 .
이를 처리하는 좋은 방법은 Simon Willison이 작성하고 다중 JavaScript Onload 함수 사용에 설명 된 함수를 사용하는 것 입니다.
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* More code to run on page load */
});
Document.ready
(jQuery 이벤트)는 모든 요소가 제자리에있을 때 발생하며 JavaScript 코드에서 참조 될 수 있지만 내용이 반드시로드되는 것은 아닙니다. Document.ready
HTML 문서가로드 될 때 실행됩니다.
$(document).ready(function() {
// Code to be executed
alert("Document is ready");
});
는 window.load
페이지가 완전히로드 될 때까지 그러나 기다릴 것이다. 내부 프레임, 이미지 등이 포함됩니다.
$(window).load(function() {
//Fires when the page is loaded completely
alert("window is loaded");
});
document.ready 이벤트는 HTML 문서가로드 window.onload
될 때 발생 하고 모든 컨텐츠 (이미지 등)가로드 될 때 항상 나중에 발생합니다.
document.ready
이미지가로드 될 때까지 기다리지 않고 렌더링 프로세스에서 "이른"개입하려는 경우 이벤트 를 사용할 수 있습니다 . 스크립트가 "일을하기"전에 이미지 (또는 다른 "콘텐츠")가 준비되어 있어야 할 때까지 기다려야 window.onload
합니다.
예를 들어 "슬라이드 쇼"패턴을 구현하고 있고 이미지 크기를 기반으로 계산을 수행해야하는 경우을 기다릴 수 있습니다 window.onload
. 그렇지 않으면 이미지로드 속도에 따라 임의의 문제가 발생할 수 있습니다. 스크립트는 이미지를로드하는 스레드와 동시에 실행됩니다. 스크립트가 충분히 길거나 서버가 충분히 빠르면 이미지가 제 시간에 도착하면 문제를 느끼지 못할 수 있습니다. 그러나 가장 안전한 방법은 이미지를로드하는 것입니다.
document.ready
사용자에게 일부 "로드 중 ..."기호를 표시 할 수있는 좋은 이벤트가 될 수 있으며, window.onload
로드 된 리소스가 필요한 스크립팅을 완료 한 다음 "로드 중 ..."기호를 제거 할 수 있습니다.
예 :-
// document ready events
$(document).ready(function(){
alert("document is ready..");
})
// using JQuery
$(function(){
alert("document is ready..");
})
// window on load event
function myFunction(){
alert("window is loaded..");
}
window.onload = myFunction;
window.onload
JavaScript 내장 함수입니다. window.onload
HTML 페이지가로드 될 때 트리거됩니다. window.onload
한 번만 쓸 수 있습니다.
document.ready
jQuery 라이브러리의 함수입니다. document.ready
HTML 및 HTML 파일에 포함 된 모든 JavaScript 코드, CSS 및 이미지가 완전히로드 될 때 트리거됩니다.
document.ready
요구 사항에 따라 여러 번 쓸 수 있습니다.
이라고 $(document).ready(f)
말하면 스크립트 엔진에 다음을 수행하도록 지시합니다.
$
로컬 범위에 있지 않기 때문에 객체 를 찾아서 선택하십시오. 충돌이 있거나 없을 수있는 해시 테이블 조회를 수행해야합니다.ready
선택된 객체의 호출 -선택된 객체에 대한 다른 해시 테이블 조회를 통해 메소드를 찾고 호출합니다.가장 좋은 경우, 이것은 2 개의 해시 테이블 조회이지만, jQuery가 수행하는 많은 작업을 무시하고 있습니다. jQuery에 $
대한 모든 가능한 입력의 부엌 싱크대이므로 다른 맵에서 쿼리를 올바른 핸들러로 전달할 가능성이 높습니다.
또는 다음을 수행 할 수 있습니다.
window.onload = function() {...}
어느 것
onload
해시 테이블 조회를 수행하여 속성인지 여부를 확인하십시오 . 함수처럼 호출되기 때문입니다.가장 좋은 경우, 단일 해시 테이블 조회 비용이 발생하는데, 이는 반드시 onload
가져와야 하기 때문에 필요 합니다.
이상적으로, jQuery는 jQuery의 런타임 디스패치없이 jQuery가 원하는 작업을 수행하기 위해 붙여 넣을 수있는 문자열로 쿼리를 컴파일합니다. 이 방법으로 옵션 중 하나를 선택할 수 있습니다
eval
.window.onload는 DOM API에서 제공하며 "주어진 리소스가로드되면 load 이벤트가 발생합니다"라고 표시됩니다.
"로드 이벤트는 문서로드 프로세스가 끝날 때 발생합니다.이 시점 에서 문서 의 모든 오브젝트 가 DOM에 있으며 모든 이미지, 스크립트, 링크 및 서브 프레임이로드를 완료했습니다." DOM onload
그러나 jQuery에서 $ (document) .ready ()는 페이지 DOM (Document Object Model)이 JavaScript 코드를 실행할 준비가 된 후에 만 실행됩니다. 여기에는 이미지, 스크립트, iframe 등이 포함되지 않습니다. jquery ready event
따라서 jquery ready 메소드는 dom onload 이벤트보다 먼저 실행됩니다 .