Categories:文章類別

[懶人拍照] 照片下載的過程中 CSS 一下
很多時候,
在我們分享照片時,都會碰上一種困境
那就是照片下載的時間實在太久了
有些是因為圖檔太大,
有些是因為頻寬的問題
也有時候是存放照片的主機(Image host)中斷
不管什麼因素,總之讀者得不斷的等等等…
最可惜的是,網路上的『等一等』,
很可能幾秒鐘之內,讀者就會忘了在等什麼
然後就離開…

當然,我們可以試著壓縮照片讓它小一點
也可以尋找更穩定的電子相簿空間
要是該作的都作了以後,
『等待下載』似乎仍是無法完全避免…
那麼,在這個時候,
我們就得換個角度來想想解決方案了

既然免不了要等,
那就在等待的過程裡,搞點小玩意
讓讀者別那麼無聊(其實是別那麼快離開 :p)

我們用點 CSS 樣式表的語法試試看吧

  1. 首先,我們先製作一張『下載中(loading.gif)...』的圖檔(如下圖)

  2. 接著,在你的照片 HTML 貼圖語法寫成下面這樣:
    <img src="你的照片路徑"
    style="background:url(loading.gif) white no-repeat center; width:***px" />

    PS:
    上述的 CSS 是精簡式的語法,
    把不同屬性的背景樣式碼合併寫成一行 ››
    background-image › background-color › background-repeat › background-position
    ...
    你要個別分開寫也可以喔(我是真懶 :p)


  3. 收工 :)

這段 CSS 的概念,
是將你的照片底下再加上一個『背景圖層(loading.gif)』
當照片還沒顯示時,
因為背景圖檔案小顯示的比較快,
那麼讀者就先會看到這個『下載中...』的圖片字串
另外記得一定要加上圖片的寬度(width:***px),
不然在照片還沒顯示前,圖片區域會很小很小,
這個提醒用的背景圖就不會置中(不好看)

除了提醒以外,
同樣的概念也可以稍作變化
把『下載中...』的圖檔換成別種圖片(只要檔案很小就行)
例如:

  • 在『下載中...』字樣下面,
    再加上一段你的座右銘或心情小語,
    讓讀者在等待的時候,還可以額外看看別的東西
    你也可以不定期的更換它,
    讓讀者常常有新意(提高大家的等待意願囉)
     
  • 不然就是把『下載中...』這樣呆板的字串,
    換成很可愛的小動畫(gif animation),
    那會相當討喜喔
     
  • 也可以是『版權提醒字樣』,
    或者是提醒大家:
    『如果你等了20秒還沒有動靜,那麼就怨恨 **** 的網路相簿吧~他們又掛了 @_@"』
     
  • 或個人形象 LOGO、企業識別系統也不錯
     
  • 當然,
    如果你要放個產品廣告小圖,也算是分秒必爭的手法囉

 
延伸閱讀:
用 CSS 結合 PNG 替照片加上浮水印
事後白平衡
利用 Alpha Channel 製作黑白照片
用 CSS 替照片加護貝
照片下載的過程中 CSS 一下