iT邦幫忙

DAY 1
1

jQuery外掛特輯系列 第 1

[jQuery]外掛特輯01:Lazy Load-延遲載入網頁圖片

此篇文章同步發表於我的部落格finalevil's blog


這個外掛用來「延遲載入圖片」,也就是說當網頁開啟以後,僅載入視線所及的範圍內的圖片,在畫面以外的圖片先暫時不載入,當捲動捲軸看到圖片所在的位置時,才開始載入那張圖片。

這樣做對於網頁使用者的好處是
(1)當網站要顯示的圖片過多的時候不會造成資料擁擠,也不會使你家的網路塞車,造成有些圖片無法顯示必須重新按下F5重新載入的窘境。
(2)對於開發者而言,也可以避免一瞬間的流量暴衝,而導致伺服器無法負荷。

光是這兩個優點利多(最近看股票看太多的後遺症XD),我就會建議大家沒事的時候為你的網站加上這個外掛。

lazyload下載網址:<http://www.appelsiini.net/projects/lazyload >

這個plugin使用的方式很簡單,將js加入網站,接著加入以下語法就可以了。

$("img").lazyload();

如果想用fadeIn特效來顯示圖片也可以加上一些設定參數,如下:

$("img").lazyload( { effect : "fadeIn" } );

事實上lazyload預設的特效是show,也就是沒有特效直接顯示,作者也沒有特別說明還可以使用哪些特效,但是你可以透過jQuery文件找到其他特效的名稱,像是slideDown、slideUp等當作輸入參數,如下:

$("img").lazyload( { effect : "slideDown" } );

其他更詳細的內容請參考我的部落格finalevil's blog


下一篇
[jQuery]外掛特輯02:Star Rating Widget-星星評價創造豐富的使用者體驗
系列文
jQuery外掛特輯18

尚未有邦友留言

立即登入留言