document ready

예를 들어 이런 코드가 있다고 해 봅시다.

<script>
  document.getElementById('test').innerHTML = '안녕'
</script>

<p id="test">임시글자</p>

당연히 오류 발생함.

코드를 위에서 부터 읽어 오는데

아래처럼 document라는 object안에 html을 정리해서 가지고 있는다

이렇게 해야 우리가 보통 사용했던 document.어쩌구

이런걸 사용할 수 있음

var document = {
  p : {
    id : 'test'
    innerHTML : '임시'
  }
}

그래서 자바스크립트 실행을 나중으로 미루는 방법이 있는데 이렇게 쓴다.

$(document).ready(function(){ 
   실행할 코드 
})
document.addEventListener('DOMContentLoaded', function() {
   실행할 코드
})

이렇게 하고 js를 body 상단에 작성하는 경우가 많았는데

요즘은 위 코드를 안쓰고 body 하단에 작성하는 경우도 많음

load 이벤트 리스너

위 document.ready와 비슷하게 dom 생성뿐만 아니라 css, js 파일이 로드 됐는지도 체크가 가능함.

$('image').addEventListner('load', function(){
    //이미지 로드 후 실행할 코드
})


$(window).on('load', function(){
  //document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드 
});

window.addEventListener('load', function(){
  //document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드
})