jQuery延遲載入圖片外掛程式Lazy Load使用指南_jquery

Lazy Load 是一個用JavaScript 編寫的jQuery 插件. 它可以延遲加載長頁面中的圖片. 在瀏覽器可視區域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置.這與圖片預先載入的處理方式正好是相反的.

在包含許多大圖片長頁中延遲載入圖片可以加快頁面載入速度. 瀏覽器將會在載入可見圖片之後即進入就緒狀態. 在某些情況下還可以幫助降低伺服器負擔.

怎麼使用?

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

複製程式碼 程式碼如下:

你必須修改HTML 程式碼. 在src 屬性中設定展位符號圖片, demo 頁面使用1×1 像素灰色GIF 圖片. 並且需要將真實圖片的URL 設定到data-original 屬性. 這裡可以定義特定的class 以獲得需要延遲載入的圖片物件. 透過這種方法你可以簡單地控制插件綁定.

複製程式碼 程式碼如下:

處理圖片的程式碼如下.

複製程式碼 程式碼如下:

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

這將使所有 class 為 lazy 的圖片將被延遲加載. 可以參考基本選項 demo

設定敏感度

幾乎所有瀏覽器的JavaScript 都是啟動的. 然而可能你仍希望能在不支援JavaScript 的客戶端展示真實圖片. 當瀏覽器不支援JavaScript 時優雅降級, 你可以將真實的圖片片段在寫