Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

什麼是LazyLoad技術？

在頁面上圖片比較多的時候，開啟一張頁面必然會引起與伺服器大數據量的交互作用。尤其是對於高清晰的圖片，佔了幾百K的空間。 Lazy Load 是一個用JavaScript 編寫的jQuery 插件. 它可以延遲加載長頁面中的圖片. 在瀏覽器可視區域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預載的處理方式正好是相反的。
在包含許多大圖片長頁中延遲載入圖片可以加快頁面載入速度. 瀏覽器將會在載入可見圖片之後即進入就緒狀態. 在某些情況下還可以幫助降低伺服器負擔，這樣勢必會引起速度上質的提升。
相容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0其中safari和chrome部分功能不支援。

Lazy Load 靈感來自 Matt Mlinac 製作的 YUI ImageLoader 工具箱. 這是示範頁面。

原文的連結在:http://www.appelsiini.net/projects/lazyload


現在Lazy Load的版本已經是1.8.1

下載位址: http://www.jb51.net/jiaoben/63757.html

實例下載:

下載聲明：
1. 註：此代碼僅供學習交流，請勿用於商業用途。
2. 註：此代碼僅供學習交流，請勿用於商業用途。
檔案資訊： 檔案名稱： Lazy Load延遲載入圖片實例
檔案Hash：dd3e435124e377c2da33344d442f85d1
檔案大小：1.1 MB
檔案上傳日期：2012 年3 月25 日更新2012 年3 月25 日
檔案描述：在頁面上圖片比較多的時候，開啟一張頁面必然引起與伺服器大數據量的互動。尤其是對於高清晰的圖片，佔了幾百K的空間。 Lazy Load 是一個用JavaScript 編寫的jQuery 插件. 它可以延遲加載長頁面中的圖片. 在瀏覽器可視區域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預載的處理方式正好是相反的。


如何使用? 下面進入正題.

Lazy Load 依賴jQuery. 請將下列程式碼加入頁面head 區域:

複製程式碼 程式碼如下:

Lazy Load的使用方法十分簡單,但新版做了一些調整,必須修改標籤的屬性。把標籤中的src 屬性改為等待圖片的URL, data-original 屬性填上真正的圖片URL.
如下:

複製程式碼複製程式碼

程式碼如下:

建議:src中的等待圖片,最好使用1像素的單色圖片。 JS程式碼如下: 複製程式碼

程式碼如下:

$("img. lazy").lazyload();


這樣就能實現Lazy Load的效果了. Demo

看完Demo後,是不是覺得沒什麼效果出現?這個問題會在後面提到.

其實,並非一定要使用它規定的data-original 屬性來存放圖片URL.你也可以自己定制別的屬性名,如下:

JS程式碼如下: 複製程式碼

程式碼如下:

$("img.lazy").lazyload({ data_attribute : "attr" }); 🎜>

只要設定data_attribute 屬性為對應的名稱即可. (注意:html程式碼大小寫不敏感!所以"data-" 後面只能跟小寫字母或數字.)

對於不支援JavaScript的瀏覽器,應該有相應的降級處理.

可以使用