배움을 기록으로

제이쿼리로 개발시, $(document).ready 나 $(window).load 함수를 자주 사용하게 되는데

두 함수의 차이점과 각각 언제 사용해야 하는지를 정리하고자 한다.

1. 웹 브라우저의 HTML 문서 렌더링 과정

'브라우저는 HTML 파일을 어떤 순서로 읽어올까?'

1. 사용자가 웹 페이지 방문
2. 웹 브라우저가 웹 문서를 읽기 시작
3. DOM 생성
4. ready 메소드 실행
5. 이미지를 포함한 요소들이 로드
6. load 메소드 실행
7. 페이지 로딩 완료

2. $(document).ready 와 $(window).load 차이

1.1.  $(document).ready

• 외부 리소스, 이미지와는 상관없이 브라우저가 DOM(document object model) 트리 생성 직후, 실행되는 콜백함수
• 중복 사용이 가능하고, 선언한 순서대로 실행
• 모든 리소스가 로드될 때까지 기다리고 동작하면 비효율적이므로, 일반적인 스크립트 동작은 ready에서 실행한다.
  
  

1.2.  $(window).load

• 페이지의 모든 요소(css, js, image ..)들이 로드된 이후에 호출되는 콜백함수
• 한 페이지에 하나의 함수만 적용된다. (가장 나중에 호출된 함수만 적용)
• 리소스 정보에 따른 이벤트 분기가 필요한 경우 사용한다.
  • 예시: 이미지 크기에 따른 분기 동작이 필요한 경우
    
    

1.3.  정리

• ready는 사용자에게 보여지는 화면이 그려지기전, load는 그려진 후에 실행
• DOM 생성 -> $(document).ready() -> 이미지를 포함한 요소들이 로드 -> $(window).load()
• ready는 중복 가능, load는 중복 불가

'다음 소스는 어떤 순서로 실행될까?'

<script type="text/javascript">
$(window).load(function() {
	console.log('1');
});

$(window).on('load', function () {
	console.log('2');
});

$(document).ready(function() {
	console.log('3');
});

$(document).ready(function() {
	console.log('4');
});
</script>

• 실행순서 : 3 > 4 > 2
• $(window).load() 와 $(window).on('load', function() {})은 같다.
• load()는 마지막 하나만 실행
• $(document).ready() 와 $(function(){})은 같다.

References

https://truecode-95.tistory.com/30

https://ojtiger.com/179