[CSS + JS] 스켈레톤 로딩(Skeleton Loading) - 컨텐츠 모자이크

서근

2022. 9. 16. 10:35

QUOTE THE DAY

CSS와 JS를 사용하여 웹 페이지가 로딩될 때
스켈레톤 로딩화면(콘텐츠 모자이크)을 구현하는 방법에 대해 알아보겠습니다.

Skeleton Screen

스켈레톤 스크린은 페이지 콘텐츠가 완전히 렌더링 되기 전에 나타나는 시각적 자리 표시자입니다. 스켈레톤 스크린은 최종 콘텐츠가 제자리에 로드되기 전에 페이지 구조의 윤곽을 나타내는 연한 색상의 배경, 선 및 텍스트로 구성됩니다.

스켈레톤 로딩을 사용하고 있는 사이트

스켈레톤 스크린(스켈레톤 로딩)은 유튜브 사이트에서 쉽게 볼 수 있습니다.

DEMO

스켈레톤 로딩 화면을 구현하기 전 데모 페이지를 확인해볼 수 있습니다.

https://skeleton-animation-js.netlify.app/

스켈레톤 로딩 구현

이제 이 스켈레톤 로딩을 구현해보도록 하겠습니다.

HTML

스켈레톤 로딩을 구현하기 위한 뼈대를 만들어줍니다.

스켈레톤 애니메이션이 보일 부분의 컨테이너와 실제 콘텐츠를 구별하여 스켈레톤 부분은 <div class="skeletion_loading">으로 묶어주고 자식 클래스에도 각각 원하는 요소를 넣어줍니다.

item-text 클래스의 자식 클래스 skeletion_text는 총 4줄로 이루어져 있기 때문에 div 태그를 네 번 추가해줬습니다.

<body>
  <article>
    <div class="flex">
      <div class="item">
        <div class="item-img">
          <div class="skeleton_loading">
            <div class="skeleton_img"></div>
          </div>
          <img class="img" src="https://i.imgur.com/8i5iLQM.jpg" />
        </div>
        <div class="item-text">
          <div class="skeleton_loading">
            <div class="skeleton_text"></div>
            <div class="skeleton_text"></div>
            <div class="skeleton_text"></div>
            <div class="skeleton_text"></div>
          </div>
          <h3>타이틀 1</h3>
          <div class="create-date">하루 전</div>
          <div class="description">오늘은 스켈레톤 애니메이션에 대해 알아보도록 하겠습니다. 자세한 내용은 서근 개발노트를 통해 확인해 보세요.</div>
        </div>
      </div>
    </div>
  </article>
</body>

CSS

뼈대를 만들었으니 CSS로 스타일을 입혀주겠습니다.

코드에서 주의 깊게 봐야 할 곳은 바로 .skeleton_text 입니다. 위 html 코드에서 타이틀, 날짜, 디스크립션 별로 나누어줬는데 이것의 길이를 직접 width: nn% 처럼 조절해줄 수 있습니다.

각각 적용하기 위해 children selector를 사용했습니다.

/*========스켈레톤 애니메이션 시작========*/
.flex {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: justify;
}
@media (max-width: 767.98px) {
    .flex {
        display: grid;
    }
}
.item {
    padding: 2rem;
}
.item-img {
    position: relative;
    width: 320px;
    height: 180px;
}

/*스켈레톤 메인 컨테이너*/
.skeleton_loading {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
}
/* 스켈레톤 이미지 */
.skeleton_img {
    width: 100%;
    height: 100%;
}

/* 스켈레톤 텍스트 */
.skeleton_text {
    margin-bottom: 0.5rem;
    height: 1rem;
}
.skeleton_text:nth-child(1) {
    width: 50%;
    height: 1.5rem;
}
.skeleton_text:nth-child(2) {
    width: 20%;
    height: 0.8rem;
}
.skeleton_text:last-child {
    width: 80%;
}

.skeleton_loading * {
    background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 40%, #e5e5e5 48%);
    border-radius: 1rem;
    background-size: 200% 100%;
    background-position: 100% 0;
    animation: load 1s infinite;
}

@keyframes load {
    100% {
        background-position: -100% 0;
    }
}

/* 실제 콘텐츠 이미지 */
.img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.item-text {
    position: relative;
    width: 320px;
}
/* 실제 콘텐츠 */
h3 {
    margin-bottom: 0.5rem;
    margin-top: 0.8rem;
}
.create-date {
    font-size: smaller;
    margin-bottom: 0.5rem;
}
.description {
    font-size: 0.9rem;
    color: #5f5f5f;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 2;
    word-break: break-all;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

Javascript

스켈레톤 로딩의 뼈대와 스타일을 입혀줬으니, 이제 웹페이지가 완벽히 로딩되고 난 뒤에 skeleton_loading 클래스를 삭제해주는 방법을 사용해야 합니다.

그리고 skeletion_loading 클래스가 삭제될 때 fadeIn 효과를 주기 위해 JQuery를 사용해주겠습니다.

// 스켈레톤 요소
const skeletonItem = document.querySelectorAll('.skeleton_loading');
// 스켈레톤 요소 전체 삭제
const hideskeleton = () => {
    skeletonItem.forEach(element => {
        $(element).fadeOut();
    });
};
// 테스트 코드 (페이지 로딩을 위해 2초간 스켈레톤 애니메이션이 보여짐)
window.onload = setTimeout(hideskeleton, 2000);
// 실제 코드 (실제로 사용될 코드)
// window.onload = hideskeleton;

스크립트를 살펴보면 테스트 코드와 실제 코드가 존재하는데, 데모 웹 사이트에는 용량이 큰 요소가 없기 때문에 스켈레톤 이미지가 아주 짧게 보이게 됩니다.

그렇기 때문에 데모 페이지에서는 window.onload가 끝나고 나서 setTimout() 메서드를 사용하여 2초 후 스켈레톤 로딩 클래스가 삭제되도록 해주었습니다.

결과 확인

데모 페이지에서도 직접 확인하실 수 있지만, 아래에서 간단하게 테스트해볼 수 있습니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

전체 소스코드

전체 소스코드를 github에도 공유합니다.

GitHub - Seogun95/skeleton_loadingJS

Contribute to Seogun95/skeleton_loadingJS development by creating an account on GitHub.

github.com

오늘은 이렇게 CSS와 JS를 사용하여 웹 페이지가 로딩될 때 스켈레톤 로딩 화면(콘텐츠 모자이크)을 구현하는 방법에 대해 알아보았습니다.

읽어주셔서 감사합니다🤟

저작자표시 비영리 변경금지

'FRONT-END > JAVASCRIPT' 카테고리의 다른 글

[JS] - 자바스크립트란? (0)	2023.01.18
[JS] JQuery 윈도우 Event Methods (2)	2022.09.15
[JS] Input이 활성화 될 때, 커서 자동 Focus 하는 방법 (0)	2022.09.15
[JS] 닫기버튼을 만들어 부모 태그 없애기 (display: none) (1)	2022.09.13
[JS] 오프스크린 이미지를 지연(Lazyload) 로드 - lazysizes (0)	2022.09.12