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 時優雅降級, 你可以將真實的圖片片段在寫
