jq圖片懶加載

　　在圖片比較多的頁面中，若是一次性把全部的圖片所有加載出來，不只加載速度慢，還會對服務器形成不小的壓力，也浪費了帶寬（不是每一個用戶都會從頭到尾看完全部頁面內容），那麼在圖片比較多的狀況下，咱們就能夠採起圖片懶加載的形式來解決這個問題。

jq中有一個lazyload.js的插件，方便好用，下面簡單的介紹一下這個插件的用法

　　1.lazyload.js是依賴於jq的，因此在使用lazyload插件的時候，必須先引入jq,而後再引入lazyload的這個js　　

　　　　<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
　　　　<script src="js/lazyload.js"></script>

      2.在使用這個插件的時候，img標籤的src必須改變成data-original才能夠，給img標籤取了一個lazy的名字，方便後面給img標籤綁定事件，同時，須要給img標籤加寬和高的屬性才能使懶加載正常運行，不加的話，懶加載是無效的

　　　　.lazy{width: 100%;height:800px;border:none;}

　　　　<img data-original="imgs/1.jpg" alt="" class="lazy">

　　 3.使img標籤懶加載，只需加如下代碼

　　　　$(function() {

     　　 $("img.lazy").lazyload();  //叫lazy這個名字的img標籤就都被懶加載了

　　　　})

　　 4.能夠根據本身的需求來設置怎麼觸發加載，好比，點擊的時候進行加載，也可使用自定義事件。怎麼經過事件讓圖片加載呢，看下面的代碼：

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

   　　  event :  "click"    //只有在點擊的時候纔會被加載

　　　　});

　　 5.使用特效，好比，圖片淡入效果，代碼以下

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

   　　  effect : "fadeIn"

　　　　});

　　  6.插件默認是有佔位符的，這個佔位符咱們也能夠給它隱藏掉，只須要如下css代碼就能夠實現

　　　　 .lazy {

    　　 display: none;

　　　　}

　　  7.加載隱藏的圖片，可能在你的頁面上埋藏可不少隱藏的圖片. 好比插件用在對列表的篩選, 你能夠不斷地修改列表中各條目的顯示狀態. 爲了提高性能, Lazy Load 默認忽略了隱藏圖片. 若是你想要加載隱藏圖片, 請將  skip_invisible 設爲  false

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

    　　 skip_invisible : false

　　　　});