首頁 >web前端 >js教程 >Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

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

WBOY原創: 2016-05-16 17:48:591095瀏覽

什麼是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的使用方法十分簡單,但新版做了一些調整,必須修改 Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

標籤的屬性。把

標籤中的src 屬性改為等待圖片的URL, data-original 屬性填上真正的圖片URL.
如下:

複製程式碼複製程式碼

程式碼如下:

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

程式碼如下:

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

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

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

其實,並非一定要使用它規定的data-original 屬性來存放圖片URL.你也可以自己定制別的屬性名,如下:
Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

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

程式碼如下:

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

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

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

可以使用

標籤中的內容. <br><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="3317" class="copybut" id="copybut3317" onclick="doCopy('code3317')"><u>複製程式碼</u></a></span> 程式碼如下:</div> <div class="codebody" id="code3317"> <br><img class="lazy" src="img/grey.gif" data-original="img/example.jpg" style="max-width:90%" heigh="480" alt="Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery" > <br><noscript><img src="img/example.jpg" style="max-width:90%" heigh="480" alt="Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery" >

CSS樣式設定:

複製程式碼程式碼如下:

 
.lazy>.lazy>.lazy> display: none; 
}

JS程式碼:

複製程式碼複製程式碼

複製程式碼

複製碼🎜> 代碼如下: $("img.lazy").show().lazyload();

設置圖片加載的反應距離
Lazy Load插件預設的設定是:圖片在瀏覽器視窗上出現,就會觸發載入.但透過設定threshold 屬性的值,可以調整圖片的預先載入位置/距離. 

複製程式碼

程式碼如下:

$("img.lazy").lazyload({ threshold : 200 }); 另外, threshold 可以為正數或負數.正數是預先加載, 假設數值為200, 則圖片距離出現到屏幕還有200px 時,就開始加載.如果是負數,則相反.假設數值為-200時,則圖片已經在視窗出現,並且距離瀏覽器視窗底部的距離為200px 時,才開始加載. PS:圖片和螢幕的距離是根據圖片的top 位置計算. 注意:threshold的設定需要考慮網站的長度和圖片的高度,如果數值過大則會導致無法載入的問題.建議數值設定不要超過對應圖片高度的一半.

透過事件觸發加載
可以通過jQuery定義的事件來觸發加載,也可以使用自己定義的事件. 

複製代碼

程式碼如下: $("img.lazy").lazyload({ event : "click" });

實作動畫動畫效果
上面的Demo之所以會沒有圖片加載的效果,是因為Lazy Load默認的圖片加載是通過jQuery 的show()方法來顯示,所以圖片出現幾乎是一瞬間.當然我們還可以實現其他效果. 

複製程式碼

程式碼如下:

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

另外還可以使用slideDown() 方法,但效果不佳. 

如果想要控制動畫的速度,也可以修改effectspeed 屬性. 

複製程式碼

程式碼如下:

程式碼如下: $("img.lazy").lazyload({ effect : "fadeIn", effectspeed : 1000

});

 
effectspeed 屬性預設是空的,所以如果不設定它,動畫的時間為400毫秒. 
Container容器屬性
當要延遲加載的圖片全擺在一個容器中.只需把container 屬性指向擺放img 的容器的對象. 
css程式碼: 

複製程式碼程式碼如下:height: 600px; overflow: scroll;

}

js程式碼:

程式碼如下: $("img.lazy").lazyload({ container: $("#container") }) ;

廢話不多說,直接看Demo ,不單豎著的可以, 橫著也行Demo .

failure_limit的屬性
Lazy Load 有一個循環查找img 的機制.根據HTML文檔的佈局從上往下查找,當找到第一個並未顯示/加載的img 時,就會停止往下查找.(其實就是對$("img.lazy") 這個對象(組)進行順序查找)

那這個failure_limit 的屬性有什麼用呢?

現在網站設計時,都會用到大量的定位樣式,如: float 和position , 這樣在瀏覽器呈現的佈局效果這樣和HTML 文件中的DOM 順序有很大差異.
這樣就會存在一種情況,某 Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

標籤已出現在屏幕上,但它卻無法顯示!! 因為它在HTML 文件中的實際位置排在了那些還沒有顯示的 Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

標籤後面, 這樣會導致顯示在屏幕上的這個 Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

標籤無法加載相應的圖片.當Lazy Load 在找到第一個未顯示的 Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

標籤時,查找已經被終止了, 並沒有繼續往下遍歷.

所以這個時候,就可以使用failure_limit屬性.

複製代碼程式碼如下:

 
$("img.lazy").lazyload({ 
failure_limit : 10 
}); 

這樣Lazy Load 會查找到第10個未顯示的 Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

標籤處.當在圖片多且佈局複雜的頁面時, failure_limit 的作用就很大了.
原文還溫馨提示:If you have a funky layout set this number to something high. 如果你的網站佈局很"變態",建議把該值調得更高.

延遲下載圖片
可以透過自訂事件,然後透過setTimeout 來設定延遲觸發該事件.

複製程式碼程式碼如下:

 
$(function() { $("img:below-the-fold").lazyload({ 
event : "sporty" 
}); 
}); 

$(window).bind ("load", function() { 
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")},5000); 
}); 
 

主要原理是,當event 被設定為scroll 以外的事件時, 實際上都會綁定了一個內建的"appear" 事件.顧名思義, 這個事件就是用來顯示圖片的. (其實scroll 也是呼叫這個事件)

skip_invisible 載入不可見的圖片
Lazy Load 外掛預設對隱藏的圖片不載入(例如display:none ).這樣做有助於效能的最佳化.如果希望連隱藏的圖片一起載入,則可以把skip_invisible 設為false .

複製程式碼程式碼

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

skip_invisible : false 
}); 

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javaScript 刪除字串空格多種方法小結_javascript技巧下一篇：javaScript 刪除字串空格多種方法小結_javascript技巧

看更多

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

相關文章