跳至主要内容

[javascript] 使用 Skeleton 增加使用者體驗

假設網頁需要在一開始載入過大的內容，導致網頁畫面渲染過久，使內容無法第一時間呈現給使用者，這就會降低使用者體驗，所以許多網頁在載入資源時會使用 Skeleton，避免使用者看到的畫面是空白的網頁。

Skeleton 的效果如下圖：

Images

今天的完成品如下圖所示：

製作 Skeleton​

首先先定義最基本的 HTML 結構，這邊會使用 template 標籤先自訂一個樣板和一個div標籤，該 div 標籤會拷貝 template 標籤內的結構。

製作 Skeleton 其實就只是將原本需載入內容的容器加上載入的動畫而已，以下 HTML 結構有加上 skeleton 的都是待會會在 css 設置動畫的 class，其餘 css 的部分就不多贅述。

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Skeleton</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="grid"></div>

    <template id="card-template">
      <div class="card">
        <div class="header">
          <img
            class="header-img skeleton"
            src="https://source.unsplash.com/100x100/?nature"
          />
          <div class="title" data-title>
            <div class="skeleton skeleton-text"></div>
            <div class="skeleton skeleton-text"></div>
          </div>
        </div>
        <div data-body>
          <div class="skeleton skeleton-text"></div>
          <div class="skeleton skeleton-text"></div>
          <div class="skeleton skeleton-text"></div>
          <div class="skeleton skeleton-text"></div>
        </div>
      </div>
    </template>
    <script src="index.js"></script>
  </body>
</html>

首先先將 skeleton 的動畫定義出來

  • 1 - 4 行：將 skeleton 透明度設置為 0.7，這麼做的原因是因為要是 skeleton 跟之後要載入的內容背景顏色相差過多，透明度能有效降低色差效果，並且將 skeleton 的載入動畫設定為無限播放 (infinite) 且當動畫結束時，會從動畫結束的地方在回到動畫開始的地方 (alternate)，簡單來說就是反向播放。
  • 6 - 10 行：將要載入的文字內容加上間距和圓弧效果。
  • 13 - 15 行：將最後一段文字和其他文字的寬度大小調整，以此達到視差效果。
  • 18 - 26 行：skeleton 動畫效果，0% ~ 100%時將背景顏色進行更改。
style.css
.skeleton {
  opacity: 0.7;
  animation: skeleton-loading 1s linear infinite alternate;
}

.skeleton-text {
  width: 100%;
  height: 0.5rem;
  margin-bottom: 0.25rem;
  border-radius: 0.125rem;
}

.skeleton-text:last-child {
  margin-bottom: 0;
  width: 80%;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 70%);
  }

  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

/* ------------以上為skeleton動畫的部分------------ */

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 1rem;
}

.card {
  background-color: blue;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  padding: 16px;
  border-radius: 4px;
}

.header {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.header-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 100%;
  margin-right: 1rem;
  flex-shrink: 0;
}

.title {
  font-weight: bold;
  font-size: 1.25rem;
  text-transform: capitalize;
  word-wrap: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex-grow: 1;
}

載入內容​

接著來到載入內容的部分，這邊會使用 fetch 來取得文章 API，並將文章內容載入我們的畫面

API 網址為：https://jsonplaceholder.typicode.com/posts

  • 1 - 2 行：抓取 DOM 節點。

  • 3 - 5 行：因為是使用template標籤的關係，我們可以將template標籤內的結構拷貝，所以程式碼的意思是，將template內的結構拷貝到grid(class)，這邊for迴圈的i<2意思是畫面剛載入的時候，有 2 個 skeleton 的結構顯示在畫面上。

  • 6 - 16 行：利用 fetch 取得外部 API 資源，並將取得的內容顯示在網頁上，這邊一樣是拷貝template結構並渲染到grid(class)，如此一來渲染出來的內容都有著 skeleton 的結構，有著 skeleton 的結構代表在載入內容時就不會讓使用者看到空白的畫面。

index.js
const grid = document.querySelector(".grid");
const cardTemplate = document.querySelector("#card-template");
for (let i = 0; i < 2; i++) {
  grid.append(cardTemplate.content.cloneNode(true));
}
fetch("https://jsonplaceholder.typicode.com/posts?_limit=2")
  .then((res) => res.json())
  .then((posts) => {
    grid.innerHTML = "";
    posts.forEach((post) => {
      const div = cardTemplate.content.cloneNode(true);
      div.querySelector("[data-title]").textContent = post.title;
      div.querySelector("[data-body]").textContent = post.body;
      grid.append(div);
    });
  });