[웹프로그래밍] HTML 페이지 데이터 로딩 화면 구현하기

들어가며

  웹페이지를 구현하다 보면 데이터를 비동기 식으로 호출할때가 있습니다. 데이터를 요청하는 호출 이후에 페이지는 로딩은 됬는데, 데이터가 채워지지 않는 경우가 있습니다. 그렇기 때문에 사용자들에게 데이터를 호출하고 있는 상태입니다. 라는 페이지 로더를 구현을 해야합니다. 아래와 같은 그림 회전을하고, 데이터가 전부 로딩이 완료가 되면 로더는 화면에서 사라지고, 내가 사용자애들에게 보여주고자 하는 페이지를 보여주면 됩니다. 아래 예제는 html파일, css파일, 그리고 javascript파일을 작성했습니다. 참고해서 사용하고 싶은 곳에 로더를 구현해보세요.

 

 

로딩 페이지 (loading-page.html)

  아래는 로딩 페이지를 구현한 html파일입니다. div 태그로 loader, container를 생성을 합니다. loader는 위 그림과 같이 회전하는 그림을 보여주는 뷰이고, container에는 내가 추가하고자 하는 즉, 호출을 통해 불러온 데이터를 표시하는 뷰입니다. 현재는 style=display:none의 값으로 화면에 표시되지 않습니다.

<div class="loader">
</div>

<div class="container" style="display:none;">
  <h1>로딩 후 화면</h1>
<div>

 

css 파일 (style.css)

  위에 로더를 그려주는 css 파일입니다.

.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}


@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

 

javascript 파일 (loading-page.js)

  loader와 container를 디스플레이에서 보여주는 시점을 지정해주시면 됩니다. loader의 경우에는 기존에 화면에 보여주고 있기 때문에 css의 함수를 통해 display에 none을 넣고, container에는 display block의 값을 넣어주므로서 뷰가 교차되서 보여집니다. css('property', 'value') 

var _showPage = function() {
  var loader = $("div.loader");
  var container = $("div.container");
  loader.css("display","none");
  container.css("display","block");
};

 

[참고] http://www.w3schools.com/

 

출처 : ourcstory.tistory.com/191?category=664896