게시글 업로드 로딩 이미지
본문
게시글 submit 시 로딩이미지가 표출되고 write_update로 이동하며 글이 업로드되게끔 하고 싶습니다.
이미지 파일을 업로드하면 간혹 올라가는데 시간이 꽤 걸려서 버튼이 눌린건지 안눌린건지 몰라서 작성완료 버튼을 마구 누르시는 분들이 있거든요
그런데 작성완료 버튼을 누르면 로딩 이미지가 뜨게했더니 submit 조건을 충족하지 않았을 경우(제목 미작성, 내용 미작성 등)에도 로딩이미지가 뜨고, submit 시에는 gif 파일이 움직이질 않습니다.
어떻게 해야 submit이 될 때에만 로딩 이미지가 표출되게 할 수 있을까요?
답변 1
ajax 방식의 통신방식이라면 충분히 가능하지만
redirect 되는 페이지의 구조상에선 깔끔하게 떨어질 수 없겠죠.
1. submit 이 된다.
이떄 submit selector 로 loading 엘리먼트를 보이게 함.
($('test').submit(function() ~ 이런 submit 셀렉터는 실제로 서밋이 이루어질때 호출됩니다.
required 등의 옵션에 의해 진행이 중지되었을때는 뜨지가 않죠
사용자에게 로딩중이라는 이미지를 인지시키려면
최소한의 delay 가 필요할 수도 있습니다.
잘 될지는 모르겠습니다.
// form 클래스명이 test_form 일경우의 예
// 로딩이미지의 엘리먼트 클래스명은 loading 일때
<script>
$('.test_form').submit(function() {
var form = $(this); //셀렉터 기억
$('.loading').show(); //로딩이미지를 보여줌
event.preventDefault(); //로딩이미지를 보여주기위해 기본동작 (submit) 실행을 막음. 안그러면 로딩이미지가 보여지기도 전에 submit 될수있음.
setTimeout(function() { //0.3초후에 submit 실행
form.submit();
},300);
});
</script>
잘 됩니다. 감사합니다!
답변을 작성하시기 전에 로그인 해주세요.
