프로필카테고리질문하기
로그인 계정 만들기

$(document).ready jQuery 없이 구현하는 방법

04 개월 전

jQuery의 $(document).ready 를 jQuery 없이 사용할 수 있는 방법이 있을까요?

window.onload 처럼 모든 이미지가 로드된 다음에 트리거되는게 아니라 $(document).ready 처럼 HTML 문서가 로드되면 바로 트리거되었으면 좋겠어요.

답변하기 의견 추가
의견 (0)
더 많은 의견 보기

답글 (1)

393 개월 전
TL;DR
결론적으로 아래와 같이 할 수 있어요.
var ready = function() { console.log('ready'); }; if(document.readyState === 'complete') ready(); else if(document.addEventListener) document.addEventListener('DOMContentLoaded', ready); else document.attachEvent('onreadystatechange', function() { if(document.readyState === 'complete') ready(); });
DOMContentLoaded

IE9 이상, 그리고 다른 모든 브라우저들에서는 DOMContentLoaded 이벤트를 사용할 수 있어요.

MDN DOMContentLoaded

DOMContentLoaded 이벤트는 처음 HTML 문서가 완전히 로드되고 분석되었을 때, 스타일시트, 이미지, 서브프레임의 로딩이 끝나기를 기다리지 않고 발생합니다. 

document.addEventListener('DOMContentLoaded', function(event) { console.log('ready'); });
onreadystatechange

IE6–8 버전에서는 onreadystatechage 이벤트를 추가한 다음 콜백에서 문서의 readyState 를 체크해야 해요.

그리고 addEventListener 또한 지원하지 않기 때문에 attachEvent 를 사용해야 해요.

var ready = function() { console.log('ready'); }; document.attachEvent('onreadystatechange', function() { if(document.readyState === 'complete') ready(); });

그리고 자바스크립트가 실행되기 전 문서 로딩이 완료되었는지 확인해주면 더 좋겠죠.

if(document.readyState === 'complete') ready(); else document.attachEvent('onreadystatechange', function() { if(document.readyState === 'complete') ready(); });
의견 추가
의견 (0)
더 많은 의견 보기