「JS30紀錄＆心得」完結 ＆ Gif切換與loading效果

發表於 | 分類於 |

JavaScript30系列終於完成啦！！

寫了一個列表網站擺放每一篇的練習概要與截圖，
這個列表站也是沒使用任何外部函式庫與框架，
最後一篇紀錄這個小站中做的靜/動態圖切換、loading效果。

[DEMO]｜ [GitHub] ｜[JavaScript30全列表]

目的

想法很單純，就只是因為gif的檔案較大若網站一次全讀會造成一些延遲，
但若使用lazyload的方式則是預設情況下gif會一直自己動造成畫面的混亂，
所以想設計成當要他動時在動，就像是影片網站的動態預覽一樣，
所以再我能力不足以去切割gif影格的狀態下，最快就是放png/gif來切換了，
而在切換gif後的載入難免會有延遲需要等待，就想做個轉圈圈讓人知道他有在做事XD

開始吧！

HTML

HTML的結構：

  1. photo: 這次要做的整個圖片事件外框
  2. photo–hasGif: 標記這裡面有gif可作切換用，若不用切換則不用給這個class
  3. photo__load: 載入動畫用
  4. photo__img: 圖片本體
1
2
3
4
<div class="photo photo--hasGif">
  <div class="photo__load"></div>
  <img class="photo__img" src="https://guahsu.io/2017/05/JavaScript30-01-Java-Script-Drum-Kit/demo1.png">
</div>

CSS

圖片框hover時的浮起效果與讀取轉圈圈特效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.photo {
  position: relative;  
  display: inline-block; 
  margin: 0px 15px;
  width: 400px;
  background-color: #fafafa;
  /* 加上陰影與transition時間，讓hover時有浮起來的感覺 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: 0.5s;
}

.photo:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.photo__img {
  max-width: 100%;
}

.photo__load {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  /* 
    為了讓載入圖示像是載入圖示再轉的樣子，
    把四個邊的其中一邊(這裡是bottom)設為透明，
    再透過border-radius設成圓型，
  */
  border: 5px solid #fafafa;
  border-bottom: 5px solid transparent;
  border-radius: 100%;
  background-color: transparent;
  /* 使用animation動畫，線性且無限循環 呼叫動畫rotate */
  animation: 1.5s linear infinite rotate;
}

/* 
  旋轉動畫，就是從0度轉到360無限循環
  而裡面的translate是為了讓加載圖示對齊圖片中心，
  也就是常見的left: 50% + translateX(-50%)這種做法，
  但因為有用到animation必須把translate設在keyframes裡面。
*/
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

JavaScript

作圖片副檔名的切換與圖片讀取檢查(轉圈圈判斷)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/** 圖片讀取檢查 */
function checkLoad(image) {
  // 取得觸發事件photo中的加載圖示
  var loadIcon = image.parentElement.querySelector('.photo__load');
  setTimeout(function() {
    // 用complete檢查圖片是否已加載完成
    if (image.complete) {
      // 已加載完成就把加載圖示隱藏
      loadIcon.style.display = 'none';
    } else {
      // 未完成就顯示加載圖示並在呼叫自己一次
      loadIcon.style.display = 'block';
      checkLoad(image);
    }
  }, 100);
}

/** 變更圖片類別(滑鼠移入載GIF移出換回PNG) */
function changeImgaeType() {
  // 判斷傳入的photo是否有gif，若沒有就跳出這個function
  if (this.classList.contains('photo--hasGif')) {
    var type = [];
    // 取得觸發事件的photo裡面圖片本體
    var image = this.querySelector('.photo__img');
    // 檢查是否已經轉為gif播放中
    var isPlay = image.classList.contains('photo__img--play');
    // 播放判斷
    if(isPlay) {
      // 如果播放中，就移除播放標記(mouseleave時會觸發)並寫好轉換用的type值
      image.classList.remove('photo__img--play');
      type = ['gif', 'png'];
    }else {
      // 如果未播放，就新增播放標記(mouseenter時會觸發)並寫好轉換用的type值
      image.classList.add('photo__img--play');
      type = ['png', 'gif'];
    }
    // 取得圖片連結(原本的src圖片連結，替換掉副檔名)
    var imageLink = image.getAttribute('src').replace(type[0], type[1]);
    // 設定新的圖片連結到原本的圖片本體中
    image.setAttribute('src', imageLink);
    // 檢查讀取
    checkLoad(image);
  }
}

/*
  因為querySelectorAll取回的不是Array是NodeList並不存在forEach方法，
  所以透過Array.from()把取回的NodeList轉Array，接著再用forEach為每個photo加上滑鼠事件的監聽 
*/
var photos = Array.from(document.querySelectorAll('.photo'));
photos.forEach(photo => {
  photo.addEventListener('mouseenter', changeImgaeType);
  photo.addEventListener('mouseleave', changeImgaeType);
});