jquery之圖片懶加載（總結）

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

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

懶加載使用：

1.先在頁面引入jquery.js 和lazyload.js（注意引入順序）

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>

2.先給需要懶加載的圖片添加類名， 例如class=“lazy”;圖片地址必須放在data-original屬性上，不必寫src屬性，進行圖像插件捆綁。代碼如下：

<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />

3.最后調用執行lazyload()函數；

<script type="text/javascript"> 
    $("img.lazy").lazyload();  
</script> 

可以設置懶加載的觸發事件：

     懶加載默認的是，srcoll事件觸發，頁面滾動的時候，當圖片出現在視野中時加載，不滾動不加載；有時候我們需要當頁面加載完成時，不用滾動，立即執行加載顯示圖片，這時候我們就可以給懶加載綁定“sporty”事件，代碼如下：

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"
    });
});

$(window).bind("load", function() {
    var timeout = setTimeout(function(){$("img.lazy").trigger("sporty")},2000);//2秒后自動加載圖片
});   　　

     也可以使用jQuery事件，例如click和mouseover。也可以使用自定義事件，如sporty、foobar默認情況下是要等到用戶向下滾動並且圖像出現在視口中時。只有當用戶點擊它們才加載圖片：

$("img.lazy").lazyload({
    event : "click"
});

可以使用加載效果：

     默認情況下，插件等待圖像完全加載並調用show()。你可以使用任何你想要的效果。下面的代碼使用fadeIn （淡入效果）。

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

參考鏈接：http://www.w3cways.com/1765.html