아디/비번 찾을 시 메일발송에 기다림을 가져다주는 로딩 jquery

안녕하세요.
그누보드에 도움될만한 글을 처음 남깁니다만 아주 한정적인 경우입니다.
저는 PHPMailer에 지메일의 ssl인증 smtp를 사용하고 있습니다.(파일 : lib/mailer.lib.php)
( 관련글 : http://baraem2005.blog.me/20175791360 )
비밀번호 찾기 할 때 ssl 거치고 작성하느라 로딩이 길어집니다.
대신 메일이 세탁되어 스팸함으로 직통하지 않고 전송도 아주 잘되는 장점이 있습니다.

위 내용을 적용하면 member의 basic스킨에서는 메일이 전송중인데 특별히 따로 표시하는 것이 없어
대게 비밀번호 찾기가 안되는 줄 알고 여러번 클릭하거나
이미 되버린 줄 알고 창닫기를 누르는 이들이 많습니다.
성급한 이들을 위해 메일을 보내는 동안 로딩을 표시하는 jquery 스크립트를 만들었습니다.

아이디/ 비밀번호 찾다보면 오타같은 이유로 여러가지 오류가 발생할 수 있습니다.
1. email주소 빈칸 여부
2. 캡챠 빈칸 여부
3. email주소 유효성 통과 여부
4. 캡챠 유효성 통과 여부
5. 등록된 email주소 여부

각각은 아래와 같이 해결했습니다. 스크립트의 주석으로 표시해뒀습니다.
1.2.4　-> '캡챠 통과해야 로딩'으로 해결
3.5　　-> '로딩시 무조건 초기화'로 해결


기본소스 : http://mytory.net/archives/783/
수정할 파일명 : skin/member/basic/password_lost.skin.php

[code]
<!-- 회원정보 찾기 시작 { -->
<div id="lost_mask" style="position:absolute;z-index:9000;display:none;left:0;top:0; z-index:9000;background-color:black;text-align:center;color:white;">
메일을 전송 중 입니다.</span>
</div>
[/code]
회원정보 찾기 시작 주석 아래에 위와같이 입력합니다.


[code]
<input type="submit" value="확인" class="btn_submit" id="loadingEmail">
[/code]
확인 버튼에 id="loadingEmail" 속성을 달아줍니다.

[code]
<script>
$(function () { //_전송 클릭시 로딩 화면 스크립트 141208 { 소스 : http://mytory.net/archives/783/ }
//_#lost_mask 무조건 초기화 (캡챠 통과후 메일 오타에 발생하는 오류 제어)
$('#lost_mask').css({'width':'0','height':'0'});
//_확인 버튼 누르면 발생한다.
$("input[id$=loadingEmail]").click(function() {
if (fpasswordlost_submit() == true){ //_캡챠 통과해야 로딩
//_마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
$('#lost_mask').css({'width':$(window).width(),'height':$(window).height()});
//_애니메이션 효과 - 일단 0.5초동안 까맣게 됐다가 70% 불투명도로 간다.
$('#lost_mask').fadeIn(500);
$('#lost_mask').fadeTo("slow",0.7);
};
});
});
</script>
[/code]
<script>사이에 jquery를 넣어주세요.


이제 실행하면 위와 같은 그림으로 로딩 스크립트가 나옵니다.
여기에 옵션으로 http://fontawesome.io/icons/ 에 Spinner Icons을 달아도 좋습니다.