DOMContentLoaded와 load 이벤트의 차이점

DOMContentLoaded와 load 이벤트의 차이점

---

DOMContentLoaded와 load이벤트 의 차이점은 무엇입니까 ?

---

로부터 모질라 개발자 센터 :

DOMContentLoaded 이벤트는 스타일 시트, 이미지 및 서브 프레임이로드를 완료 할 때까지 기다리지 않고 문서가 완전히로드되고 구문 분석 될 때 시작됩니다 (로드 이벤트는 완전히로드 된 페이지를 감지하는 데 사용될 수 있음).

---

DOMContentLoaded이벤트는 즉시 DOM 계층이 완전히 구축 된 바와 같이, 발광하는 load모든 이미지와 서브 프레임이 완성 로딩이있을 때 이벤트가 그것을 할 것입니다.

DOMContentLoaded대부분의 최신 브라우저에서는 작동 하지만 IE9 이상을 포함한 IE 에서는 작동 하지 않습니다 . jQuery 라이브러리에서 사용되는 것과 같이 이전 버전의 IE에서는이 이벤트를 모방 하는 몇 가지 해결 방법 이 있으며 IE 특정 onreadystatechange 이벤트를 첨부합니다 .

---

차이점을 직접 확인하십시오.

데모

에서 마이크로 소프트 IE

현재 페이지의 구문 분석이 완료되면 DOMContentLoaded 이벤트가 발생합니다. 광고 및 이미지를 포함한 모든 리소스에서 모든 파일의로드가 완료되면 load 이벤트가 발생합니다. DOMContentLoaded는 UI 기능을 복잡한 웹 페이지에 연결하는 데 사용할 수있는 훌륭한 이벤트입니다.

에서 모질라 개발자 네트워크

DOMContentLoaded 이벤트는 스타일 시트, 이미지 및 서브 프레임이로드를 완료 할 때까지 기다리지 않고 문서가 완전히로드되고 구문 분석 될 때 시작됩니다 (로드 이벤트는 완전히로드 된 페이지를 감지하는 데 사용될 수 있음).

---

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

문서가 "준비"될 때까지 페이지를 안전하게 조작 할 수 없습니다. jQuery는 이러한 준비 상태를 감지합니다. $ (document) .ready () 안에 포함 된 코드는 DOM (Document Object Model) 페이지가 JavaScript 코드를 실행할 준비가 된 후에 만 ​​실행됩니다. $ (window) .load (function () {...}) 안에 포함 된 코드는 DOM뿐만 아니라 전체 페이지 (이미지 또는 iframe)가 준비되면 실행됩니다.

참조 : http://learn.jquery.com/using-jquery-core/document-ready/

---

• domContentLoaded : DOM이 모두 준비되었고 JavaScript 실행을 차단하는 스타일 시트가없는 시점을 표시합니다. 즉, 렌더 트리를 (잠재적으로) 구성 할 수 있습니다. 많은 JavaScript 프레임 워크는 자체 로직 실행을 시작하기 전에이 이벤트를 기다립니다. 이러한 이유로 브라우저는 EventStart 및 EventEnd 타임 스탬프를 캡처하여이 실행 시간을 추적 할 수 있습니다.

• loadEvent : 모든 페이지로드의 마지막 단계에서 브라우저는 "onload"이벤트를 발생시켜 추가 응용 프로그램 논리를 트리거 할 수 있습니다.

출처

참고 URL : https://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events