아디/비번 찾을 시 메일발송에 기다림을 가져다주는 로딩 jquery > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

첨부파일

helloo.gif (22.1K) 23회 다운로드 2014-12-19 00:04:41

본문

안녕하세요.
그누보드에 도움될만한 글을 처음 남깁니다만 아주 한정적인 경우입니다.
저는 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


<!-- 회원정보 찾기 시작 { -->
<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> 

회원정보 찾기 시작 주석 아래에 위와같이 입력합니다.



<input type="submit" value="확인" class="btn_submit" id="loadingEmail">

확인 버튼에 id="loadingEmail" 속성을 달아줍니다.


<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>

<script>사이에 jquery를 넣어주세요.


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


추천
0

댓글 5개

인터넷이 느린 경우 효과를 볼 수 있나요?
적용해봐도... 너무 빨라서 적용한 내용이 나타나는지 어떤 지 알 수가 없네요.
댓글보고 잉? 내 서버만 느린가 했는데
곰곰히 생각해보니 제가 PHPMailer에 지메일의 ssl인증 smtp를 적용하고 있었습니다...
창피합니다...본문에 관련 내용 추가하겠습니다.
아이쿠... 그렇진 않습니다~^^
느린 접속환경인 회원들에게 유용할 수도 있어 적용해보려고 했는데...
효과를 확인할 수 없으니... 제대로 적용이 된 것인지 어떤지, 잘못 적용하여 오류가 있는지 어떤지 알 수가 없어서 곤란한 부분이 있다는 얘기입니다.
전체 2,426 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT