如果你經營的是影像部落格，一定會有一個困擾的問題：每次載入頁面因為大量的圖片而導致讀取時間過長，網頁一直處於讀取狀態實在讓人不快。
現在這問題有解 了！ 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的 文件說明。
趕緊試用看看吧，這個外掛對影像部落格的幫助非常大喔 ^^
沒有留言:
張貼留言