etc./StackOverFlow

window.onload 대 $(document).ready()

청렴결백한 만능 재주꾼 2023. 4. 14. 22:02
반응형

질문자 :Vaibhav Jain


window.onload 와 jQuery의 $(document).ready() 메소드의 차이점은 무엇입니까?



ready 이벤트는 HTML 문서가 로드된 onload 이벤트는 나중에 모든 콘텐츠(예: 이미지)도 로드되었을 때 발생합니다.

onload 이벤트는 DOM의 표준 이벤트이고 ready 이벤트는 jQuery에만 해당됩니다. ready 이벤트의 목적은 문서가 로드된 후 최대한 빨리 발생하여 페이지의 요소에 기능을 추가하는 코드가 모든 콘텐츠가 로드될 때까지 기다릴 필요가 없도록 하는 것입니다.


Guffa

window.onload 는 내장 JavaScript 이벤트이지만, 브라우저(Firefox, Internet Explorer 6, Internet Explorer 8 및 Opera )에서 구현에 미묘한 문제 가 있었기 때문에 jQuery는 이를 추상화하고 즉시 실행되는 document.ready 페이지의 DOM이 준비되었기 때문입니다(이미지 등을 기다리지 않음).

$(document).ready ( document.ready 가 아님 )는 jQuery 함수로 다음 이벤트를 래핑하고 일관성을 제공합니다.

  • document.ondomcontentready / document.ondomcontentloaded - 문서의 DOM이 로드될 때 발생하는 새로운 이벤트(이미지 등이 로드 되기 전에 어느 정도 시간이 걸릴 수 있음); 다시 말하지만 Internet Explorer와 다른 국가에서는 약간 다릅니다.
  • window.onload (이전 브라우저에서도 구현됨)(이미지, 스타일 등)

Piskvor left the building

$(document).ready() 는 jQuery 이벤트입니다. JQuery의 $(document).ready() 메서드는 DOM이 준비되는 즉시 호출됩니다(즉, 브라우저가 HTML을 구문 분석하고 DOM 트리를 구축했음을 의미합니다). 이렇게 하면 문서를 조작할 준비가 되자마자 코드를 실행할 수 있습니다.

예를 들어 브라우저가 DOMContentLoaded 이벤트를 지원하는 경우(IE가 아닌 많은 브라우저가 지원하는 것처럼) 해당 이벤트에서 실행됩니다. (DOMContentLoaded 이벤트는 IE9+의 IE에만 추가되었습니다.)

이를 위해 두 가지 구문을 사용할 수 있습니다.

 $( document ).ready(function() { console.log( "ready!" ); });

또는 단축 버전:

 $(function() { console.log( "ready!" ); });

$(document).ready() 요점:

  • 이미지가 로드될 때까지 기다리지 않습니다.
  • DOM이 완전히 로드되었을 때 JavaScript를 실행하는 데 사용됩니다. 여기에 이벤트 핸들러를 넣습니다.
  • 여러 번 사용할 수 있습니다.
  • "$가 정의되지 않았습니다."가 표시되면 $ 를 jQuery
  • 이미지를 조작하려는 경우에는 사용되지 않습니다. 대신 $(window).load() 사용하십시오.

window.onload() 는 기본 JavaScript 함수입니다. window.onload() 이벤트는 DOM(문서 객체 모델), 배너 광고 및 이미지를 포함하여 페이지의 모든 콘텐츠가 로드될 때 발생합니다. 둘의 또 다른 차이점은 하나 이상의 $(document).ready() onload 함수는 하나만 가질 수 있다는 것입니다.


James Drinkard

Windows 로드 이벤트는 DOM(문서 개체 모델) 콘텐츠와 비동기 JavaScript , 프레임 및 이미지를 포함하여 페이지의 모든 콘텐츠가 완전히 로드될 때 발생합니다. body onload=를 사용할 수도 있습니다. 둘 다 동일합니다. window.onload = function(){} 및 <body onload="func();"> 는 동일한 이벤트를 사용하는 다른 방법입니다.

jQuery $document.ready window.onload 보다 조금 일찍 실행되며 페이지에 DOM(Document 객체 모델)이 로드되면 호출됩니다. 이미지, 프레임이 완전히 로드 될 때까지 기다리지 않습니다.

다음 기사 에서 $document.ready() window.onload() 와 어떻게 다른지


Vivek

약간의 팁:

창에 이벤트를 추가하려면 항상 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가 덮어쓰여지는 객체의 속성일 뿐이기 때문입니다.

addEventListener 와 유사하게 onload 보다는 $(document).ready() 를 사용하는 것이 좋습니다.


Илья Зеленько

 $(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>


dev4092

Internet Explorer에서 $(document).ready() 를 사용할 때 주의할 점. 전체 문서가 로드되기 전에 HTTP 요청이 중단되면(예: 페이지가 브라우저로 스트리밍되는 동안 다른 링크가 클릭됨) IE는 $(document).ready 이벤트를 트리거합니다.

$(document).ready() 이벤트 내의 코드가 DOM 개체를 참조하는 경우 해당 개체를 찾을 수 없으며 Javascript 오류가 발생할 수 있습니다. 해당 객체에 대한 참조를 보호하거나 해당 객체를 참조하는 코드를 window.load 이벤트로 연기하십시오.

다른 브라우저(특히 Chrome 및 Firefox)에서는 이 문제를 재현할 수 없었습니다.


deck

$(document).ready() 는 HTML 문서가 완전히 로드되었을 때 발생 하는 jQuery 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; };

또한 두 가지 모두에 대한 빠른 참조로 아래 이미지를 만들었습니다.

여기에 이미지 설명 입력


Alireza

이벤트

$(document).on('ready', handler) jQuery의 준비 이벤트에 바인딩합니다. 핸들러는 DOM이 로드될 때 호출됩니다. 이미지와 같은 자산이 여전히 누락되었을 수 있습니다. 바인딩 시 문서가 준비되면 호출되지 않습니다. jQuery는 이를 위해 DOMContentLoaded -Event를 사용하여 사용할 수 없는 경우 에뮬레이트합니다.

$(document).on('load', handler) 는 서버에서 모든 리소스가 로드 되면 시작되는 이벤트입니다. 이제 이미지가 로드됩니다. onload 는 원시 HTML 이벤트인 반면 ready 는 jQuery에 의해 빌드됩니다.

기능

$(document).ready(handler) 실제로 약속 입니다. 호출 시 문서가 준비되면 핸들러가 즉시 호출됩니다. 그렇지 않으면 ready -Event에 바인딩됩니다.

jQuery 1.8 이전 에는 $(document).load(handler) $(document).on('load',handler) 의 별칭으로 존재했습니다.

추가 읽기


Community Wiki

window.onload: 일반적인 JavaScript 이벤트입니다.

document.ready: 전체 HTML이 로드되었을 때의 특정 jQuery 이벤트입니다.


Amir Mehdi Delta

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

Mike Clark

한 가지 기억해야 할 점(또는 내가 기억해야 할 사항)은 ready 할 수 있는 것처럼 onload 쌓을 수 없다는 것입니다. 즉, jQuery 마법은 ready onload 에서는 그렇게 할 수 없습니다.

마지막 onload 는 이전 onload 우선합니다.

이를 처리하는 좋은 방법은 분명히 한 Simon Willison이 작성하고 여러 JavaScript Onload Functions 사용에 설명된 함수를 사용하는 것입니다.

 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 */ });

Donald A Nummer Jr

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;

Nimesh khatri

window.onload 는 JavaScript 내장 함수입니다. window.onload 는 HTML 페이지가 로드될 때 트리거됩니다. window.onload 는 한 번만 쓸 수 있습니다.

document.ready 는 jQuery 라이브러리의 기능입니다. document.ready HTML과 HTML 파일에 포함된 모든 JavaScript 코드, CSS 및 이미지가 완전히 로드되면 트리거됩니다. document.ready 는 요구 사항에 따라 여러 번 작성할 수 있습니다.


Amit

$(document).ready(f) 라고 말하면 스크립트 엔진에 다음을 수행하도록 지시합니다.

  1. 개체 문서를 가져와서 푸시합니다. 로컬 범위에 있지 않기 때문에 문서가 있는 위치를 찾기 위해 해시 테이블 조회를 수행해야 합니다. 다행히 문서는 전역적으로 바인딩되어 단일 조회입니다.
  2. 개체 $ 찾아 선택합니다. 로컬 범위에 없기 때문에 충돌이 있을 수도 있고 없을 수도 있는 해시 테이블 조회를 수행해야 합니다.
  3. 또 다른 해시 테이블 조회인 전역 범위에서 개체 f를 찾거나 함수 개체를 푸시하고 초기화합니다.
  4. 전화 ready 방법을 찾아서 호출 선택한 개체에 다른 해시 테이블 조회를 포함 선택한 개체의.
  5. 완료.

가장 좋은 경우, 이것은 2개의 해시 테이블 조회이지만 jQuery에 의해 수행되는 무거운 작업을 무시하는 것입니다. 여기서 $ 는 jQuery에 대한 모든 가능한 입력의 주방 싱크이므로 다른 맵이 쿼리를 올바른 처리기로 발송할 가능성이 높습니다.

또는 다음과 같이 할 수 있습니다.

 window.onload = function() {...}

어느 것

  1. 전역 범위에서 개체 창을 찾습니다. JavaScript가 최적화되어 있으면 창이 변경되지 않았으므로 이미 선택한 개체가 있으므로 아무 작업도 수행할 필요가 없음을 알 수 있습니다.
  2. 함수 개체는 피연산자 스택에 푸시됩니다.
  3. onload 가 속성인지 아닌지를 해시 테이블 조회를 통해 확인하십시오. 왜냐하면 그것은 함수처럼 호출되기 때문입니다.

onload 를 가져와야 하기 때문에 필요한 단일 해시 테이블 조회가 필요합니다.

이상적으로 jQuery는 쿼리를 문자열로 컴파일하여 jQuery에서 원하는 작업을 수행하기 위해 붙여넣을 수 있지만 jQuery의 런타임 디스패치 없이 수행할 수 있습니다. 이렇게 하면 다음 중 하나를 선택할 수 있습니다.

  1. 오늘날과 같이 jquery의 동적 디스패치를 수행합니다.
  2. jQuery가 쿼리를 순수 JavaScript 문자열로 컴파일하도록 하여 원하는 작업을 수행하도록 eval에 전달할 수 있습니다.
  3. 2의 결과를 코드에 직접 복사하고 eval 비용을 건너뜁니다.

Dmitry

window.onload는 DOM API에서 제공하며 "주어진 리소스가 로드되면 로드 이벤트가 발생합니다"라고 표시됩니다.

"로드 이벤트는 문서 로드 프로세스가 끝날 때 발생합니다. 이 시점 에서 문서의 모든 개체 는 DOM에 있고 모든 이미지, 스크립트, 링크 및 하위 프레임이 로드를 완료했습니다." DOM 로드

그러나 jQuery에서 $(document).ready()는 페이지 DOM(Document Object Model)이 JavaScript 코드를 실행할 준비가 된 후에만 실행됩니다. 여기에는 이미지, 스크립트, iframe 등이 포함되지 않습니다. jquery ready 이벤트

따라서 jquery ready 메소드는 dom onload 이벤트보다 먼저 실행됩니다.


andyCao

시간은 흐르고 이제 ECMAScript 2021이며 IE11은 사람들이 점점 더 적게 사용합니다. 대조적으로 가장 두 가지 이벤트는 load 와 DOMContentLoaded 입니다.

DOMContentLoaded 는 초기 HTML 문서가 완전히 로드되고 구문 분석 된 후에 시작됩니다.

load DOMContentLoaded 가 실행되고 전체 페이지가 로드된 후 모든 종속 리소스의 로드가 완료되기를 기다 립니다. 리소스의 예: 스크립트, 스타일시트, 이미지 및 iframe 등

중요: 동기 스크립트는 DOM 구문 분석을 일시 중지합니다.

두 이벤트 모두 DOM이 사용할 수 있는지 여부를 결정하는 데 사용할 수 있습니다. 예를 들어:

 <script> // DOM hasn't been completely parsed document.body; // null document.addEventListener('DOMContentLoaded', () => { // Now safely manipulate DOM document.querySelector('#id'); document.body.appendChild(); }); /** * Should be used only to detect a fully-loaded page. * * If you just want to manipulate DOM safely, `DOMContentLoaded` is better. */ window.addEventListener('load', () => { // Safely manipulate DOM too document.links; }); </script>

LitileXueZha

출처 : http:www.stackoverflow.com/questions/3698200/window-onload-vs-document-ready

반응형

'etc. > StackOverFlow' 카테고리의 다른 글

JavaScript에서 null과 undefined의 차이점은 무엇입니까?  (0) 2023.04.14
TypeScript의 인터페이스와 유형  (0) 2023.04.14
Android Studio 프로젝트의 .gitignore에는 무엇이 있어야 합니까?  (0) 2023.04.14
MySQL 쿼리 결과를 CSV 형식으로 출력하려면 어떻게 해야 합니까?  (0) 2023.04.14
PHP에서 암호 해싱에 bcrypt를 어떻게 사용합니까?  (1) 2023.04.14

'etc./StackOverFlow'의 다른글

  • 현재글window.onload 대 $(document).ready()

관련글

댓글

티스토리툴바