jQuery 筆記 - loader.css 實務應用

Loader.css 的基本認識可看這篇。

專案實務應用 - 等待遠端資料文字出現前顯示 loader，載入資料後讓 loader 消失

這次專案遇到的一個要求，就是點擊按鈕後要先跑 loader，跑完 loader 在顯示文字。

先確認要執行的架構順序。

HTML 架構

因為是在文字區塊內先顯示 loader，在顯示文字，所以 loader 放在 p 前面。

<div class="wrap">
  <button class="btn">請點擊我</button>
  <div class="textBox">
    <div class="title">
      等待遠端資料文字出現前顯示 loader，載入資料後讓 loader 消失
    </div>
    <div class="loader-inner ball-spin-fade-loader"></div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius dolor minus
      doloribus qui voluptas est nesciunt sunt accusamus alias eos, possimus
      similique doloremque dolore eaque repudiandae velit ducimus quidem ipsam.
    </p>
  </div>
</div>

CSS 樣式

主要值得記錄是這兩行，但也好像還好，就是把 loader 位置使用絕對定位固定，然後文字一開始不顯示。

.loader-inner {
  position: absolute;
  left: 50%;
  top: 50%;
}
p {
  display: none;
}

JavaScript 控制時間差

點擊按鈕後要做的事情：

• 使 .textBox 淡入。
• 先讀取 loader 並且使 loader 樣式在 一秒後淡出。
• 接著讓文字於 2 秒後淡入。

透過時間差就會看起來有連續的感覺。

$(".btn").click(function () {
  $(".textBox").fadeIn();
  setTimeout(function () {
    $(".loader-inner").loaders();
    $(".ball-spin-fade-loader").fadeOut(800);
  }, 1000);
  //box 的淡入時間
  setTimeout(function () {
    $("p").fadeIn();
  }, 2000);
});

CodePen https://codepen.io/hnzxewqw/pen/LYNYdLY

結語

其實這個思維並不難，小卡關的地方是執行的順序還有 HTML 的架構順序要放對。