[JavaScript] ajaxStart, ajaxStop을 이용하여 로딩화면 구현하기

암스테르담의 기적

 

특정 화면을 로드할 때 해당 화면에 들어가는 컨텐츠(이미지, 텍스트)를 서버에서 가져와야 하는 경우가 있다.

이럴 때 보통 ajax 기법을 사용.

 

하지만, ajax 요청을 보낸 후 서버에서 데이터를 처리하는 작업량이 많을 경우,

요청에서 응답까지의 시간이 꽤 걸리는 일이 생긴다.

 

그렇게 사용자를 페이지에 노출되기 까지 흰색 바탕의 화면만 보고 있게 할수는 없으니

이때 ajax에서 제공해주는 ajaxStart, ajaxStop을 한번 사용해보자.

 

$(document).ajaxStart(function() {
  // 로딩화면을 보여줄 코드
});

$(document).ajaxStop(function() {
  // 로딩화면을 숨기는 코드
});

워낙 제공 코드가 가독성이 좋아서 이해하는데 어려움이 없었다.

 

1. ajaxStart

  - 문자그대로 ajax 요청이 시작하게 되면 실행할 코드를 넣어준다.

  - 로딩화면을 보여주어야 하니 $('#loadingImage').show(); 와 같은 코드가 우선일 것이다.

 

2. ajaxStop

  - ajax 요청이 중지되거나, 마무리 되면 실행할 코드를 넣어준다.

  - 로딩화면을 숨겨야 하니 마찬가지로 $('#loadingImage').show(); 와 같은 코드가 우선일 것.