두가지 형태의 페이지 로딩 [ 로딩중, 로딩 프로그레스바 ] > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

두가지 형태의 페이지 로딩 [ 로딩중, 로딩 프로그레스바 ] 정보

JavaScript 두가지 형태의 페이지 로딩 [ 로딩중, 로딩 프로그레스바 ]

첨부파일

loading_bar.zip (4.7K) 33회 다운로드 2023-01-31 10:17:00

본문

제 홈에 필요해서 만들어 보았습니다

정확한 로딩바 표현이라고는 하기 힘들수도 있습니다

 

하지만 그냥 "이건 쓸만해~"하며 최면 걸면서 쓰면 그런대로 괜챦을거라 생각되어서 소스를 올립니다

소스가 가벼우며 타입 지정을 통해서 둘중 하나를 선택해 쓰거나 또는 꺼 둘수 있습니다

 

타입 1은 로딩이 완료되기 직전까지 하얀 바탕에 점3개가 커졌다 작아졌다 하면서 로딩중이란 메세지를 보여주며 로딩이 끝나면 페이드 아웃됩니다

 

타입2는 상단에 프로그레스바가 나오며 진행률을 표시합니다

정확한 진행률이라고 하기에는 어설프지만 그런대로 봐줄만은 하기에 타입으로 추가했습니다

추후 정확한 표현이 가능하면 이에 대한 보완이 있을수 있습니다( 이는 없을수도 있다는... )

 

원리는 document.readyState라는 메소드를 통해서 현재의 페이지가 로딩중인지

로딩이 완료가 되었는지 판별해서 페이드 아웃을 시켜주는 형태입니다

 

사용법은 html페이지의 헤드에 작성된 형태처럼 스타일 파일을 연결하고

그 아래에 자바스크립트 변수용 스크립트를 작성하고 상황에 맞게 자바스크립트로 변수를 지정하며

그 아래에 동작용 자바스크립트 파일을 연결하면 됩니다

 

자바스크립트는 되도록 먼저 실행되는 최상위의 파일이나 스크립트에 넣어주신후

( dom이 형성되기 이전에 있어야 로딩중이란 의미가 있습니다 )

목적에 맞게 자바스크립트 변수를 N 또는 Y로 바꿔 가면서 실행하면 됩니다

 

유튜브 아이프레임은 의미 없습니다 어느정도 로딩 시간을 벌기 위한 테스트용입니다

( 자바스크립트 오류들은 유튜브에서 나오는 것이니 오해 없으시길... )

 

내 홈에서 잘 된다고 다른 사람의 홈에서 까지 잘된다고 할수는 없겠지만

대부분 최신 부라우져에서 지원하는 간단한 메소드를 통해서 만들었기에 큰 문제는 없을거라 생각됩니다 

 

테스트는  첨부한  페이지를 열어서 head 태그에 스크립트로 쓰여진


    // 로딩 타입 1 : 하얀 바탕화면에 로딩중 

    var    loading_pannel_use   = 'Y'; // Y 또는 N


    // 로딩 타입 2 : 상단 프로그레스바
    var    loading_progress_use = 'N'; // Y 또는 N


위의 변수를 조정해서 사용해 보세요

조금이라도 편리함을 드렸으면 좋겠습니다

괜챦다 싶으면 추천을 : )

추천
2

댓글 2개

전체 5,352
개발자팁 내용 검색

회원로그인

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