基於jquery的lazy loader外掛程式實現圖片的消極式載入[簡單使用]

通過使用jquery的lazy loader外掛程式可以實現圖片的消極式載入，當網頁比較長的時候，會先只載入使用者視窗內的圖片，視窗外的圖片會等到你拖動捲軸至後面才載入，這樣有效避免了因圖片過多而載入慢的弊端。

　　使用lazy loader外掛程式很簡單，只要在頁面中引入lazy loader外掛程式，然後為頁面上的圖片調用消極式載入方法就可以了。lazy loader外掛程式的：http://www.appelsiini.net/projects/lazyload。下面先看看具體的使用方法：
複製代碼 代碼如下:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$("img").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
});
</script>

Jquery.LazyLoad.js外掛程式參數詳解：


1,用圖片提前佔位
placeholder : "img/grey.gif",
參數:placeholder,值為某一圖片路徑.此圖片用來佔據將要載入的圖片的位置,待圖片載入時,佔位圖則會隱藏

2,載入使用何種效果
effect : "fadeIn",
參數：effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn

3,提前開始載入
threshold : 200,
參數:threshold,值為數字,代表頁面高度.如設定為200,表示捲軸在離目標位置還有200的高度時就開始載入圖片,可以做到不讓使用者察覺.

4,事件觸發時才載入
event : "click",
參數:event,值有click(點擊),mouseover(滑鼠划過),sporty(運動的),foobar(…).可以實現滑鼠莫過或點擊圖片才開始載入,後兩個值未測試…

5,對某容器中的圖片實現效果
container: $("#container"),
參數:container,值為某容器.lazyload預設在拉動瀏覽器捲軸時生效,這個參數可以讓你在拉動某DIV的捲軸時依次載入其中的圖片

6,圖片排序混亂時
failurelimit : 10,
參數:failurelimit,值為數字.lazyload預設在找到第一張不在可見地區裡的圖片時則不再繼續載入,但當HTML容器混亂的時候可能出現可見地區內圖片並沒載入出來的情況,failurelimit意在載入N張可見地區外的圖片,以避免出現這個問題.