jquery之圖片懶加載（總結）

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

懶加載使用：

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

1
2
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
2.先給須要懶加載的圖片添加類名， 例如class=「lazy」;圖片地址必須放在data-original屬性上，沒必要寫src屬性，進行圖像插件捆綁。代碼以下：

1
<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
3.最後調用執行lazyload()函數；

1
2
3
<script type="text/javascript">
    $("img.lazy").lazyload(); 
</script>
能夠設置懶加載的觸發事件：

     懶加載默認的是，srcoll事件觸發，頁面滾動的時候，當圖片出如今視野中時加載，不滾動不加載；有時候咱們須要當頁面加載完成時，不用滾動，當即執行加載顯示圖片，這時候咱們就能夠給懶加載綁定「sporty」事件，代碼以下：

1
2
3
4
5
6
7
8
9
$(function() {
    $("img.lazy").lazyload({
        event : "sporty"
    });
});
<a href="www.wfqcp.com/" class="lightblue">濰坊長途汽車站</a> 
 
$(window).bind("load", function() {
    var timeout = setTimeout(function(){$("img.lazy").trigger("sporty")},2000);//2秒後自動加載圖片
});   <em id="__mceDel" style="background-color: #ffffff; font-family: verdana, Arial, Helvetica, sans-serif; font-size: 14px">　　</em>