在網站上載入圖片是需要消耗時間的，因為圖片的傳遞和文字比起來實在要大太多。因為在載入網站時常常會看到一個個的空窗，然後就突然填充了圖片。如果想要令到整件事件可以順暢一點，我們就需要用到 Placeholder 和 Shimmer 技巧了。

### 什麼是 Image placeholder

Image placeholder 是指為圖片預留空的一個填充物，一般在整網站時為了排版的可預測性 (predictability)，我們都會加入 `width` / `height` / `min-widht` / `min-height` / `max-width` / `max-height` 設定圖片的大細，確保在載入後都在可控制的範圍來，使排版不會出現不能預期的效果。

這個時候我們可以用一個 `div` 來作為圖片在載入時的填補。可以看看下面代碼 : 

```css
/* 設定為 relative 及背景色彩 */
div.image {
    position: relative;
    background-color: #DDDDDD;
}
```

```html
<!-- 建立一個 div 作為 placeholder 並設定 width / height -->
<div class='image' style='width: 300px; height: 100px;'></div>
```

這樣就可以得一個灰色的 DIV 作為圖片載入的 placeholder 了。

### 設定 Shimmer 效果

Shimmer 就是在灰色的 div 上加入白色的閃光，令使用者知道這是一個正在載入中的提示。

我們可以通過使用 CSS 的 animation 去達成。

```css
/* 圖片的 placeholder */
div.image {
    position: relative;
	background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
	background-size: 300%;
	background-position-x: 100%;
	animation: shimmer 1s infinite linear;
}

/* 圖片的內容 */
div.image .image-src {
    position: absolute;
	inset: 0px;
	display: block;
}

/* 動畫 */
@keyframes shimmer {
	to {
		background-position-x: 0%
	}
}
```

然後就可以在 div 但放入你想要載入的東西了。

```html
<!-- 建立一個 div 作為 placeholder 並設定 width / height -->
<div class='image' style='width: 300px; height: 100px;'>
  
  	<!-- 加入圖片的 element -->
  	<div class='image-src' style='background: url(https://source.unsplash.com/1024x600) center center / cover no-repeat;'></div>
</div>
```