반응형
하기 코드와 같이 상세페이지에 이동할 때 Form submit 처리 시 로딩 애니메이션을 실행하는 경우 History back(뒤로가기)를 클릭하는 경우 무한 로딩 애니메이션이 발생되는 경우가 발생된다.
function goDetail(id) {
let frm = document.detailForm;
frm.action = "/detail.do";
frm.id.value = id;
frm.submit();
$('#loading').show();
}
위와 같은 이슈 발생 시 beforeunload 이벤트에 로딩 애니메이션을 종료 시켜 주면 된다.
beforeunload 이벤트는 사용자가 페이지를 떠날때 발생되는 이미지로 뒤로가기, 새로고침, 브라우저 종료, Form Submit 등에서 beforeunload 이벤트가 호출된다.
window.onbeforeunload = function() {
$("#loading").hide();
}
- Window: beforeunload 이벤트
https://developer.mozilla.org/ko/docs/Web/API/Window/beforeunload_event
Window: beforeunload 이벤트 - Web API | MDN
beforeunload 이벤트는 문서와 그 리소스가 언로드 되기 직전에 window에서 발생합니다. 이벤트 발생 시점엔 문서를 아직 볼 수 있으며 이벤트도 취소 가능합니다.
developer.mozilla.org
반응형
'프로그래밍 > Javascript' 카테고리의 다른 글
Polyfill (0) | 2023.03.08 |
---|---|
[Tip] 두 날짜 사이의 날짜 구하기 (1) | 2017.07.25 |