도와주세요

로딩 로딩 도와줘요

모니터2017.10.12 13:3210.12조회 수 179댓글 21

AA

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

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

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

댓글 21
  • title: 각성의 돌맛스타 17.10.12 17:38 댓글 좋아요 0

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

  • 맛스타님께
    글쓴이 모니터 17.10.12 19:02 댓글 좋아요 0

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

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

  • 네모 17.10.12 21:35 댓글 좋아요 0

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

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

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

     

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

  • 네모님께
    글쓴이 모니터 17.10.12 22:00 댓글 좋아요 0

    AJAX ㅜㅜ..

  • STULAB 17.10.14 23:42 댓글 좋아요 0

    ajax로 받아오면서

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

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

  • STULAB님께
    글쓴이 모니터 17.10.15 00:09 댓글 좋아요 0

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

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

  • 모니터님께
    STULAB 17.10.16 22:48 댓글 좋아요 0

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

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

  • STULAB님께
    글쓴이 모니터 17.10.17 00:05 댓글 좋아요 0

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

  • 모니터님께
    title: 각성의 돌맛스타 17.10.17 19:19 댓글 좋아요 0

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

  • 맛스타님께
    글쓴이 모니터 17.10.17 20:54 댓글 좋아요 0

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

  • No Profile
    title: 황금 서버 (30일)humit 17.10.18 19:43 댓글 좋아요 0

    약간 늦긴 했지만

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

    참조하시기 바랍니다.

  • humit님께
    글쓴이 모니터 17.10.18 20:04 댓글 좋아요 0

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

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

     

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

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

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

  • 모니터님께
    No Profile
    모니터님 축하합니다.
    추가로 200포인트만큼 포인트 폭탄+를 받았습니다.
  • 모니터님께
    No Profile
    title: 황금 서버 (30일)humit 17.10.18 20:10 댓글 좋아요 0

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

  • humit님께
    글쓴이 모니터 17.10.18 20:14 댓글 좋아요 0

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

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

  • 모니터님께
    No Profile
    title: 황금 서버 (30일)humit 17.10.18 20:19 댓글 좋아요 0

    지금 구현한 방법은 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');

    }

    });

     

  • humit님께
    글쓴이 모니터 17.10.18 20:46 댓글 좋아요 0

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

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

     

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

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

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

  • 모니터님께
    No Profile
    title: 황금 서버 (30일)humit 17.10.18 20:47 댓글 좋아요 0

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

  • humit님께
    글쓴이 모니터 17.10.18 20:50 댓글 좋아요 0

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

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

    그래도 감사합니다!!

  • 모니터님께
    No Profile
    title: 황금 서버 (30일)humit 17.10.23 18:48 댓글 좋아요 0

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

  • humit님께
    글쓴이 모니터 17.10.23 20:46 댓글 좋아요 0

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

도와주세요!

사용자들끼리 궁금한 부분을 서로 공유하는 자리 입니다. 자유롭게 질문하고 답변하세요!

번호 제목 글쓴이 날짜 조회 수
공지 회원 전용 페이지가 생겼습니다.9 마스터 2018.03.20 514
공지 소모임 게시판을 신설합니다.7 마스터 2018.01.23 609
공지 [필독] 질문하는 방법5 마스터 2018.02.23 135
207 XE Ace 스킨 사용중인데 이상합니다.4 Kongjak 2017.10.17 77
206 티켓팅, 수강신청 등 관련하여 특정 서버시각 확인에 대해 질문 드려요6 title: 이니스프리이니스프리 2017.10.16 206
205 드롭박스의 상태가 이상합니다.5 title: 게노세크트(이로치, 얼굴)놀고먹는라이츄 2017.10.15 136
204 카카오 계정 로그인7 powerserver9011 2017.10.15 291
203 Let's Encrypt6 powerserver9011 2017.10.13 139
202 미디어위키 잘 아시는 분 계신가요15 휴리유니파파 2017.10.12 162
로딩 로딩 도와줘요21 모니터 2017.10.12 179
200 이거 어디서 파나요?11 기특한크리퍼 2017.10.11 112
199 포인트를 사용한 사행성 게임이..4 네모 2017.10.11 127
198 홈... 이런게 가능할까요?21 모니터 2017.10.10 210
197 yourls vs phurl 어느 쪽을 더 선호하시는지 사용하신 회원님들께 여쭤봅니다2 title: 이니스프리이니스프리 2017.10.08 123
196 Windows 10 Administrator 계정4 powerserver9011 2017.10.07 190
195 라이믹스 blogapi 아시는 분들 계신가요!?!?1 준그루 2017.10.06 96
194 Rhymix 짧은 주소가 안됩니다.7 Kongjak 2017.10.04 173
193 호스팅 신청 과정 중2 로직 2017.10.03 112
192 Angular JS가 도데체 뭔지 아직 이해가 안가요....15 Equalise 2017.10.02 179
191 XE 이전5 기특한크리퍼 2017.10.02 162
190 스마트업로더 이미지 업로드 엑박12 연우빠 2017.10.01 199
189 혹시 XE 쓰시는분들중에 앱 만들어서 쓰시는 분 계신가요!?2 준그루 2017.10.01 142
188 SNS로그인 서버오류6 ljhw0512 2017.09.30 106
Prev 1 ... 3 4 5 6 7 8 9 10 11 12 ... 18 Next
서버에 요청 중입니다. 잠시만 기다려 주십시오...