2010年4月28日 星期三

影像部落格必備外掛: Lazyload

轉貼自: http://blog.nightspirit.tw/2010/01/lazyload.html

 

如果你經營的是影像部落格,一定會有一個困擾的問題:每次載入頁面因為大量的圖片而導致讀取時間過長,網頁一直處於讀取狀態實在讓人不快。


現在這問題有解 了! Lazyload是一個基於Jquery程式庫開發的插件,可以應用再各式網頁上。 它的功能非常單純,就是不載入螢幕之外的圖片,直到圖片被捲動到螢幕內才用AJAX的方式去讀取。好處就是加快網頁預載的速度,而且因為不在同一時間 向伺服器大量要求圖片,理論上也會讓影像的載入更順暢。

Lazyload的效果大概類似flickriver, 會把螢幕外的圖像先用虛擬的div預留空間,等畫面捲動到圖像的正上緣才執行載入。NS自己在部落格上裝了這個Plugin,效果還蠻顯著的。

使用方法很簡單,首先你的網頁必需裝過Jquery,如果沒有網路空間的話,其實可以去直連google ajax lib:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js'></script>
 把 這行程式放到<head></head>之中。

再來就是去Lazyload下載回Lazyload的js檔,放到網路空間(可以考慮用google code hosting),然後同樣把程式碼放到head裡面
<script src='lazyload.js在網路上的address'></script>

最後是用jquery的document ready來做一個啟動的動作: 
<script>
$(function(){$("img").lazyload();});
</script>


進階一點的用法是像我一樣丟進一些option參數,我自己是加了placeholder:"#333"還有effect : "fadeIn"的效果進去,相關的使用說明可以參考Lazyload的 文件說明。

趕緊試用看看吧,這個外掛對影像部落格的幫助非常大喔 ^^

沒有留言:

張貼留言

Related Posts with Thumbnails