History back 시 무한 로딩 애니메이션 발생

하기 코드와 같이 상세페이지에 이동할 때 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