$(document).ready()와 window.onload() 차이점

웹 개발을 진행하다보면, 최초 웹 페이지를 불러오는 과정에서 선행되어야 하는 함수가 있기 마련이다.

예를 들어, 회원 목록 페이지를 구현한다고 했을 때 HTML이 모두 불러온 이후 최신 회원목록을 DB에서 불러와서 화면에 보여주어야 한다.

 

jQuery를 이용하는 사람들은 주로 $(document).ready()를 이용한다.

해당 함수는 DOM데이터만 로드가 완료되면 ready() 내 함수가 바로 실행된다.

예시로 '회원 목록 페이지 -> 회원정보 상세보기 페이지 -> [뒤로가기]' 로 이전 '회원 목록 페이지' 로 이동하는 이벤트를 발생시켰다.

 

그런데 '회원 목록 페이지'에서 검색한 키워드와 페이지 번호가 초기화 되어버리는 문제가 발생했다.

문제 발생의 원인은, 뒤로 가기 실행 시 '키워드, 페이지 번호' 정보가 HTML에 재할당되기 이전에 함수가 바로 실행되어 버린 점이다.

$(document).ready(function() {
  search(); // 회원목록 검색
}

웹 페이지의 정보를 모두 표시한 다음, 최신 목록을 가져와야 할 때는 window.onload()를 사용하는 것이 올바르다.

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

 

다만, window.onload 같은 경우 모든 외부리소스나 이미지가 브라우저에 불리워진 이후에 작동을 하게 되어 외부 리소스의 용량이 높을 경우는 일부 지연현상이 발생할 수 있다.