아디/비번 찾을 시 메일발송에 기다림을 가져다주는 로딩 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을 달아도 좋습니다.
그누보드에 도움될만한 글을 처음 남깁니다만 아주 한정적인 경우입니다.
저는 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을 달아도 좋습니다.
댓글 5개
10년 전
고맙습니다. (감사합니다.)
10년 전
유용하길 바랍니다. (댓글 감사합니다.)
10년 전
인터넷이 느린 경우 효과를 볼 수 있나요?
적용해봐도... 너무 빨라서 적용한 내용이 나타나는지 어떤 지 알 수가 없네요.
적용해봐도... 너무 빨라서 적용한 내용이 나타나는지 어떤 지 알 수가 없네요.
10년 전
댓글보고 잉? 내 서버만 느린가 했는데
곰곰히 생각해보니 제가 PHPMailer에 지메일의 ssl인증 smtp를 적용하고 있었습니다...
창피합니다...본문에 관련 내용 추가하겠습니다.
곰곰히 생각해보니 제가 PHPMailer에 지메일의 ssl인증 smtp를 적용하고 있었습니다...
창피합니다...본문에 관련 내용 추가하겠습니다.
10년 전
아이쿠... 그렇진 않습니다~^^
느린 접속환경인 회원들에게 유용할 수도 있어 적용해보려고 했는데...
효과를 확인할 수 없으니... 제대로 적용이 된 것인지 어떤지, 잘못 적용하여 오류가 있는지 어떤지 알 수가 없어서 곤란한 부분이 있다는 얘기입니다.
느린 접속환경인 회원들에게 유용할 수도 있어 적용해보려고 했는데...
효과를 확인할 수 없으니... 제대로 적용이 된 것인지 어떤지, 잘못 적용하여 오류가 있는지 어떤지 알 수가 없어서 곤란한 부분이 있다는 얘기입니다.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4426 | ||
| 594 | 9년 전 | 11799 | ||
| 593 | 9년 전 | 7762 | ||
| 592 | 9년 전 | 9271 | ||
| 591 | 9년 전 | 5746 | ||
| 590 | 9년 전 | 6585 | ||
| 589 | 9년 전 | 7698 | ||
| 588 | 9년 전 | 10039 | ||
| 587 | 9년 전 | 6218 | ||
| 586 |
|
9년 전 | 11861 | |
| 585 | 9년 전 | 20009 | ||
| 584 |
병원에서일해요
|
9년 전 | 12049 | |
| 583 | 9년 전 | 10146 | ||
| 582 | 9년 전 | 6118 | ||
| 581 | 9년 전 | 11509 | ||
| 580 | 9년 전 | 7337 | ||
| 579 |
sahara
|
9년 전 | 6633 | |
| 578 |
|
9년 전 | 16920 | |
| 577 |
|
9년 전 | 8025 | |
| 576 |
|
9년 전 | 8757 | |
| 575 |
|
9년 전 | 9315 | |
| 574 |
병원에서일해요
|
9년 전 | 6999 | |
| 573 | 9년 전 | 17196 | ||
| 572 | 9년 전 | 9604 | ||
| 571 | 9년 전 | 7411 | ||
| 570 | 9년 전 | 8776 | ||
| 569 | 9년 전 | 6741 | ||
| 568 | 9년 전 | 17237 | ||
| 567 | 9년 전 | 18441 | ||
| 566 | 9년 전 | 9391 | ||
| 565 | 9년 전 | 7665 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기