Django 로딩 화면 - Django loding hwamyeon

[css/js] 로딩화면 만들기

.loading{
	width:100%;
	height:100%;
	position:fixed;
	left:0px;
	top:0px;
	background:#fff;
	z-index:1000; /* 이 값으로 레이어의 위치를 조정합니다. */
}

<div class="loading"></div>

<script>
	$(window).load(function(){
		$(".loading").fadeOut();
	});
</script>

label

• # CSS
• # HTML
• # javascript
• # loading화면

favorite favorite 추천 1 playlist_play playlist_play 목록

keyboard_arrow_left 이전글

[layout계산기] 포토샵 및 시안 작업시 배너간격 및 사이즈 배치를 도와드립니다.

19.04.19

다음글 keyboard_arrow_right

[크롬/chrome] 오프라인 설치 버전 다운로드 / chrome standalone

19.03.11

Box-Shadow CSS

Box-Shadow CSS 설정 페이지

숫자 야구게임

간단한 PHP 3자리 숫자 야구게임

셀프 배너제작

간단한 이미지 제작 셀프로 쉽게!

레이아웃 계산

배너사이즈 구하기

Access Token

티스토리 Access Token 발급받기

<style type="text/css">
#wrap-loading { /*화면 전체를 어둡게 합니다.*/
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
/*display: none;*/
/*background: rgba(0,0,0,0.2);*/ /*not in ie */
/*filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000');*/ /* ie */
}

.loading { /*로딩 이미지*/
position: fixed;
top: 50%;
left: 50%;
margin-left: -21px;
margin-top: -21px;
}
</style>

body 안에

<div id="wrap-loading" >
<img src="images/loading.gif" class="loading" style="width:50px;">
</div>

<script>
window.onload = function(){
$('#wrap-loading').hide();
}
</script>

loading.gif

0.05MB

공유하기

게시글 관리

저작자표시

• 카카오스토리
• 트위터
• 페이스북

'[ Web 관련 ] > jQuery ' 카테고리의 다른 글

고해상도 이미지를 웹 사이트에 사용하다 프레임이 끊기는 현상을 마주했을 것이다. 프론트엔드에서 이미지 최적화-로딩 처리 방법이 궁금하던 중 미디엄(Medium)의 블로그 글 내 로딩 효과가 눈에 들어왔다. 이미지 영역에 회색 배경화면이 뜨고, 블러된 이미지가 불러오면서 원본 이미지를 불러오는 과정인데, 트랜지션이 끊김없이 매우 부드럽다. 방법을 검색하던 중, 링크드인 소프트웨어 엔지니어인 José M. Pérez의 솔루션을 찾게 되었고, 장고 블로그에 적용해보았다.

그가 구현한 내용은 아래와 같다.

1. 이미지가 표시 될 <div/>를 렌더링한다. 미디엄은 <div/>를 만들어 padding-bottom에 이미지의 비율을 백분율로 <div/>를 사용한다. 최종 이미지 위치 위에 렌더링되어 이미지가 로드되는 동안 리플로우(reflow: 컴퓨터 화면에서 텍스트가 차지하는 공간을 조정하는 것)가 일어나는 것을 방지한다. 고해상도 이미지의 경우 끊겨서 로딩되는데 이를 해결해준다는 뜻이다. 또 다른 말로는 '고유위치(intrinsic placeholders)'라고 하는데 해당 이펙트가 일어날 이미지 영역을 미리 잡아놓는 것이다.

2. 작은 사이즈 이미지를 로딩한다. 최저해상도(원본의 20 % 정도) 사이즈가 작은 썸네일 이미지를 요청해 매우 낮은 화질으로 요청한다. 해당 썸네일 이미지의 마크업은 HTML에서

   <figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
     <div class="aspectRatioPlaceholder is-locked">
       <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
       <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
         <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
           <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
           <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
           <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;</noscript>
       </div>
     </div>
   </figure>
   

   2로 반환되므로 브라우저가 바로 그 이미지를 가져오기 시작한다.

3. 저해상도 이미지가 로드되면

   <figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
     <div class="aspectRatioPlaceholder is-locked">
       <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
       <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
         <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
           <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
           <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
           <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;</noscript>
       </div>
     </div>
   </figure>
   

   3에 그려진다. 그런 다음 이미지 데이터를 가져와

   <figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
     <div class="aspectRatioPlaceholder is-locked">
       <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
       <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
         <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
           <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
           <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
           <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;</noscript>
       </div>
     </div>
   </figure>
   

   4 함수를 전달한다. 동시에 원본 이미지가 요청된다.

4. 원본 해상도 이미지가 로드되면 이미지가 표시되고 캔버스가 숨겨진다.

5. CSS 애니메이션을 적용해 매우 부드러운 전환이 일어난다.

Markup

마크업 구조를 작성하면 아래와 같다.

<figure>
  <div>
    <div/> <!--  세로 비율을 유지하므로 placeholder 영역이 축소되지 않는다. -->
    <img/> <!--  해상도가 ~ 27x17, 저품질인 작은 이미지다. -->
    <canvas/> <!-- 위의 이미지를 취하여 흐리게(blur) 필터를 적용한다. -->
    <img/> <!-- 큰(원본) 이미지를 표시한다. -->
    <noscript/> <!-- 폴백(fallback) -->
  </div>
</figure>

위 골격을 토대로 아래와 같이 작성할 수 있다.

<figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
  <div class="aspectRatioPlaceholder is-locked">
    <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
    <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
      <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
        <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
        <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
        <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;</noscript>
    </div>
  </div>
</figure>

데모

이처럼 자바스크립트로 이미지를 제어함으로써 시각적인 눈속임을 통해 이미지 렌더링을 효과적으로 처리할 수 있다.

1. 로딩을 유연하게 제어한다. 자바스크립트를 통해 요청된 이미지를 제어 할 수 있다. 한 페이지 내 모든 작은 썸네일을 동시에 요청하는 반면에, 뷰포트 내에서만 큰 이미지 로딩을 요청할 수 있다.

2. placeholder 위치를 명확히 인식할 수 있다. 페이로드를 포기하지 않고 해당 영역에 색감을 주고, 흐릿한 효과를 줌으로써 해당 영역을 인지가 가능하다. 썸네일은 2KB로 용량이 적다.

3. 디바이스 별로 다른 이미지 크기를 제공할 수 있어 페이지 로딩 속도를 최적할 수 있다.

django에 적용하기

나의 경우, 장고웹프레임워크로 개인 웹 사이트를 만들면서 적용해보았다. 이미지를 db에서 저장 시, 설정된 확장자, 사이즈 등에 따라 이미지 최적화를 시켜야했는데, 이를 위해 django-imagekit를 사용했다.

설치는 매우 간단하다.

• PIL 또는 Pillow가 설치되어야 한다. 이미 장고에

  <figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
    <div class="aspectRatioPlaceholder is-locked">
      <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
      <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
        <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
          <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
          <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
          <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;</noscript>
      </div>
    </div>
  </figure>
  

  5가 있다면 이미 설치가 되어 있을 것이다.

• <figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
    <div class="aspectRatioPlaceholder is-locked">
      <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
      <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
        <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
          <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
          <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
          <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;</noscript>
      </div>
    </div>
  </figure>
  

  6로 패키지를 설치한다.
• 프로젝트 폴더 내

  <figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
    <div class="aspectRatioPlaceholder is-locked">
      <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
      <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
        <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
          <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
          <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
          <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;</noscript>
      </div>
    </div>
  </figure>
  

  7 파일을 열어

  <figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
    <div class="aspectRatioPlaceholder is-locked">
      <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
      <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
        <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
          <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
          <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
          <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;</noscript>
      </div>
    </div>
  </figure>
  

  8 리스트에 imagekit을 추가한다.

settings.py

INSTALLED_APPS = [
    #...
    'imagekit',
]

models.py

게시글에 해당하는

<figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
  <div class="aspectRatioPlaceholder is-locked">
    <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
    <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
      <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
        <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
        <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
        <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;</noscript>
    </div>
  </div>
</figure>