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