提供防水、抓漏、壁癌處理、地坪工程相關案件,線上超過上百筆精選裝潢案件
都能在這找到屬於自己的合適
鐵皮屋店面/新家裝潢後一片混亂?屋內外除塵清掃
粗清細清免煩惱,專人諮詢服務,敬請洽詢

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] Lazy Load-延遲載入網頁圖片

房東:小嵐
發表時間:2011-04-04
[檢舉]


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



這樣做對於網頁使用者的好處是

(1)當網站要顯示的圖片過多的時候不會造成資料擁擠,也不會使你家的網路塞車,造成有些圖片無法顯示必須重新按下F5重新載入的窘境。

(2)對於開發者而言,也可以避免一瞬間的流量暴衝,而導致伺服器無法負荷。



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



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



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



$("img").lazyload();





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





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



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





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





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



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





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





  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!



  •  共 0 人回應

    姓名:
    佈告內容: