在我們分享照片時，都會碰上一種困境
那就是照片下載的時間實在太久了
有些是因為圖檔太大，
有些是因為頻寬的問題
也有時候是存放照片的主機(Image host)中斷
不管什麼因素，總之讀者得不斷的等等等…
最可惜的是，網路上的『等一等』，
很可能幾秒鐘之內，讀者就會忘了在等什麼
然後就離開…
當然，我們可以試著壓縮照片讓它小一點
也可以尋找更穩定的電子相簿空間
要是該作的都作了以後，
『等待下載』似乎仍是無法完全避免…
那麼，在這個時候，
我們就得換個角度來想想解決方案了
既然免不了要等，
那就在等待的過程裡，搞點小玩意
讓讀者別那麼無聊(其實是別那麼快離開 :p)
我們用點 CSS 樣式表的語法試試看吧
- 首先，我們先製作一張『下載中(loading.gif)...』的圖檔(如下圖)
接著，在你的照片 HTML 貼圖語法寫成下面這樣：
<img src="你的照片路徑"
style="background:url(loading.gif) white no-repeat center; width:***px" />
style="background:url(loading.gif) white no-repeat center; width:***px" />
PS:
上述的 CSS 是精簡式的語法，
把不同屬性的背景樣式碼合併寫成一行 ››
background-image › background-color › background-repeat › background-position
...
你要個別分開寫也可以喔(我是真懶 :p)
收工 :)
這段 CSS 的概念，
是將你的照片底下再加上一個『背景圖層(loading.gif)』
當照片還沒顯示時，
因為背景圖檔案小顯示的比較快，
那麼讀者就先會看到這個『下載中...』的圖片字串
另外記得一定要加上圖片的寬度(width:***px)，
不然在照片還沒顯示前，圖片區域會很小很小，
這個提醒用的背景圖就不會置中(不好看)
除了提醒以外，
同樣的概念也可以稍作變化
把『下載中...』的圖檔換成別種圖片(只要檔案很小就行)
例如：
- 在『下載中...』字樣下面，
再加上一段你的座右銘或心情小語，
讓讀者在等待的時候，還可以額外看看別的東西
你也可以不定期的更換它，
讓讀者常常有新意(提高大家的等待意願囉)
不然就是把『下載中...』這樣呆板的字串，
換成很可愛的小動畫(gif animation)，
那會相當討喜喔
也可以是『版權提醒字樣』，
或者是提醒大家：
『如果你等了20秒還沒有動靜，那麼就怨恨 **** 的網路相簿吧～他們又掛了 @_@"』
或個人形象 LOGO、企業識別系統也不錯
當然，
如果你要放個產品廣告小圖，也算是分秒必爭的手法囉
延伸閱讀：
用 CSS 結合 PNG 替照片加上浮水印
事後白平衡
利用 Alpha Channel 製作黑白照片
用 CSS 替照片加護貝
照片下載的過程中 CSS 一下