• 목록
  • 아래로
  • 위로
  • 21
  • 모니터
  • 조회 수 573

안녕하세요? Jquery로 이런게 가능할까요? (PHP이어도 상관 없지만..) setTimeout 같은건 좀 다르려나..

페이지 접속시 5초 이상 걸린다면 함수(로딩 화면) 실행, 로딩 완료되면 다시 종료.

이전에 이 같은 방식의 소스를 본적이 있는 것 같은데.. 어딨는지 기억이 ㅠㅠ

작성자
모니터 45 Lv. (17%) 163310/169280EXP

사랑합니다~ 행복합니다~♥

댓글 21

NoYeah
profile image

로딩 페이지나 로딩 프로그레스 소스들을 참고해보면 되지 않을까요?

comment menu
2017.10.12. 17:38

신고

"NoYeah님의 댓글"

이 댓글을 신고 하시겠습니까?

모니터 작성자 → NoYeah
profile image

아쉽게도 대부분이 그냥 단순히 이미지 출력하는 수준으로만 나와서..ㅠㅠ..

오픈된 소스를 혹시 알고 계시면 알려주세요~

comment menu
2017.10.12. 19:02

신고

"모니터님의 댓글"

이 댓글을 신고 하시겠습니까?

네모
profile image

음.. 접속하는 페이지에서 AJAX로 원본 페이지를 받아오고...

AJAX에서 응답시간이나 timeout 시간 체크해서 5초 이상이 되면 함수 실행.

같은 방식은 생각이 납니다만...

 

음... 잘 모르겠네요..ㅠ

comment menu
2017.10.12. 21:35

신고

"네모님의 댓글"

이 댓글을 신고 하시겠습니까?

모니터 작성자 → 네모
profile image

AJAX ㅜㅜ..

comment menu
2017.10.12. 22:00

신고

"모니터님의 댓글"

이 댓글을 신고 하시겠습니까?

STULAB
profile image

ajax로 받아오면서

settimeout 설정하고(settimeout 안에서 받아졌는지 체크)

받아졌을시 로딩화면을 fadeout 하면 될것같네요!

comment menu
2017.10.14. 23:42

신고

"STULAB님의 댓글"

이 댓글을 신고 하시겠습니까?

모니터 작성자 → STULAB
profile image

흐음.. settimeout으로 가능한가요?

X초 후에 출력되는 게 아니라 X를 초과하면 나타나는건데요?

comment menu
2017.10.15. 00:09

신고

"모니터님의 댓글"

이 댓글을 신고 하시겠습니까?

STULAB → 모니터
profile image

그냥 settimeout 로 5초후에 로드 안됬으면 로딩중 출력시키고

onpageloaded 로 로딩바 닫으면 될것 같은데요...

comment menu
2017.10.16. 22:48

신고

"STULAB님의 댓글"

이 댓글을 신고 하시겠습니까?

모니터 작성자 → STULAB
profile image

문제는 그걸 어떻게 짜야하는지 모르겠.. 히이이잌.

comment menu
2017.10.17. 00:05

신고

"모니터님의 댓글"

이 댓글을 신고 하시겠습니까?

NoYeah → 모니터
profile image

앗 코드를 만들면 공유해달라고 하려고 했는데. ㅋㅋ

comment menu
2017.10.17. 19:19

신고

"NoYeah님의 댓글"

이 댓글을 신고 하시겠습니까?

모니터 작성자 → NoYeah
profile image

언젠가 만들어지면 슬쩍 공유할게요ㅋㅋ

comment menu
2017.10.17. 20:54

신고

"모니터님의 댓글"

이 댓글을 신고 하시겠습니까?

title: 황금 서버 (30일)humit
profile image

약간 늦긴 했지만

http://humit.dothome.co.kr/test.html

참조하시기 바랍니다.

comment menu
2017.10.18. 19:43

신고

"humit님의 댓글"

이 댓글을 신고 하시겠습니까?

모니터 작성자 → humit
profile image

저건 그냥 settimeout 사용하신거 아닌가요? ㅠㅠ...

x초후 실행 같은 타이머가 아니라..

 

DOM 불러오는 것이 ready 상태일때 x초 이상 걸리는 경우..

로딩 화면이 load(DOM 완료)까지 출력되는겁니다.

즉, 순식간이죠. (네트워크 환경이 느리거나.. 사이트가 무거운 경우를 보안하기 위함이죠)

comment menu
2017.10.18. 20:04

신고

"모니터님의 댓글"

이 댓글을 신고 하시겠습니까?

포인트 폭탄+ → 모니터
모니터님 축하합니다.
추가로 200포인트만큼 포인트 폭탄+를 받았습니다.
comment menu
2017.10.18. 20:04

신고

"포인트 폭탄+님의 댓글"

이 댓글을 신고 하시겠습니까?

삭제

"포인트 폭탄+님의 댓글"

이 댓글을 삭제하시겠습니까?

title: 황금 서버 (30일)humit → 모니터
profile image

ajax로 불러오는 걸 해서 5초 이상이 되면 loading이미지를 띄워주고, 그게 아니면 로딩 이미지를 보여주지 않는 방식을 원하시는 거 아닌가요?

comment menu
2017.10.18. 20:10

신고

"humit님의 댓글"

이 댓글을 신고 하시겠습니까?

모니터 작성자 → humit
profile image

5초 후에 불러오는게 아니라 5초 이상 걸린다면(DOM 로드가 진행형인 경우) DOM 완료까지 이미지/로딩을 출력하는거에요 :)

(DOM 로드가 완료되면 이미지/로딩은 사라지는거죠) // 백지 화면의 지루함을 완화하기 위함이죠 ㅎㅎ

comment menu
2017.10.18. 20:14

신고

"모니터님의 댓글"

이 댓글을 신고 하시겠습니까?

title: 황금 서버 (30일)humit → 모니터
profile image

지금 구현한 방법은 5초 후에 불러오는 방식이 아닙니다....

 

// 이부분은 ajax로 요청을 하고 3초 이후에 실행될 내용입니다. 로딩이 안된 경우에 로딩 이미지를 보여줍니다. 빠른 결과를 위해 3초로 설정했고, 이부분을 5초로 설정하면 5초 뒤에 로딩 이미지가 나타납니다.

setTimeout(function(){

var elem = $('div#loading img')[0];

if(elem.className !== "load") {

$(elem).css('display', 'block');

console.log('show loading image!');

} else {

console.log('Already load data');

}

}, 3000);

 

// 이부분에서 실제 데이터 요청이 들어갑니다. 현재 test.php는 5초 후에 응답을 하게 되어있습니다.

$.ajax({

url: "/test.php",

type: "GET",

dataType: "text",

timeout: 0,

success: function(data) {

$('div#result').text("result : " + data);

$('div#loading img').css('display','none').addClass('load');

}

});

 

comment menu
2017.10.18. 20:19

신고

"humit님의 댓글"

이 댓글을 신고 하시겠습니까?

모니터 작성자 → humit
profile image

홍.. 일단 상세한 설명 감사합니다 :)

실행될 시간을 빼버린다면..

 

test.php 불러오기 전에는(즉 로딩이 안된 경우) 로딩 이미지가 출력된다는 의미죠?

그렇다면 test.php 내용물을 끝까지 불러올때까지 로딩 이미지가 계속 출력되나요?

아니면 test.php 불러오는 순간 로딩 이미지 출력이 끝나는건가요?

comment menu
2017.10.18. 20:46

신고

"모니터님의 댓글"

이 댓글을 신고 하시겠습니까?

title: 황금 서버 (30일)humit → 모니터
profile image

요청후 3초간은 기다렸다가 이후에 로딩이미지를 출력하고, test.php 내용을 전부 읽어오면 로딩 이미지를 없애는 방식으로 되어있습니다.

comment menu
2017.10.18. 20:47

신고

"humit님의 댓글"

이 댓글을 신고 하시겠습니까?

모니터 작성자 → humit
profile image

아하..ㅜㅜ 네. 이해했습니다.

하지만 아쉽게도 제가 원하는 것은 타이머 방식이 아니에요 ㅜㅜ.

그래도 감사합니다!!

comment menu
2017.10.18. 20:50

신고

"모니터님의 댓글"

이 댓글을 신고 하시겠습니까?

title: 황금 서버 (30일)humit → 모니터
profile image

혹시 자체적으로 로딩이 5초 이상이 걸릴거라고 생각이 되어진다면 바로 로딩 이미지가 나오기를 원하시는 거였나요??

comment menu
2017.10.23. 18:48

신고

"humit님의 댓글"

이 댓글을 신고 하시겠습니까?

모니터 작성자 → humit
profile image

DOM로드가 x초 안에 완료가 안된 경우 로딩이 DOM완료까지 출력하는거죠.

comment menu
2017.10.23. 20:46

신고

"모니터님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 24.02.11.17:21 376
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 4061
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4464
922 미디어플렛폼 vs 커뮤니티 55 title: 에그joyful 19.01.13.15:55 996
921 현재로서는 CKEditor 4.14를 사용하는게 최선일까요? 37 이니스프리 20.05.06.01:47 577
920 유튜브 다운로더에 대해 여쭤봅니다. 31 Nginx 20.05.12.22:05 609
919 히어로 무비 추천 부탁드립니다! 30 이니스프리 19.10.29.13:48 307
918 베리즈 웹 쉐어 연결 시간 초과 문제 29 image 루니 17.08.07.11:38 1166
917 데스크탑이냐 랩탑이냐, 그것이 문제입니다. 29 네모 19.11.28.14:15 331
916 파티션 복구 프로그램 TestDisk 잘 아시는 분 계시나요? 29 이니스프리 17.11.10.14:53 3745
915 AWS Lightsail 관련해서 질문이 있습니다... 24 MYIG 20.05.26.00:18 575
914 호스팅 신청했는데요 도움 좀 부탁드립니다. 24 GsusWeb 20.06.20.21:34 227
913 윈도우 서버를 VPS에 구축하는 것에 대해 질문 드립니다. 23 이니스프리 20.02.17.21:06 632
912 글쓰기 포인트 차감을 우회하여 도배하는 스팸에 대해 질문드려요~! 22 이니스프리 20.05.31.00:25 424
911 도움이 절실합니다. Freenom 질문입니다.(왕초보) 22 image 슬립 17.11.14.12:55 1322
910 음 제 블로그가 증발한건가요...? 21 갱생협스 19.01.13.22:50 270
909 호스팅 FTP 계속 타임 아웃이 생깁니다..! 21 image BVC_Liper_Okbul 18.06.29.20:33 563
908 JSP의 장단점에 대해 질문 드립니다. 21 이니스프리 20.06.09.21:42 218
907 네이버 사전을 크롤링할 때 한자의 인코딩 관련 하여 질문 드립니다. (일부 한자만 깨지는 현상) 21 image 이니스프리 19.11.22.16:22 1236
906 홈... 이런게 가능할까요? 21 모니터 17.10.10.18:37 401
905 게임 용어에 대해 질문 드립니다 (탱커/딜러/힐러) 21 이니스프리 20.06.05.20:45 2112
로딩 로딩 도와줘요 21 모니터 17.10.12.13:32 573
903 오라클 클라우드 프리티어 가입이 안 되네요 ㅠㅠ 20 이니스프리 20.06.26.21:31 4827