JQuery緩衝加載圖片插件lazyload.js的使用方法

 

 lazyload.js是一個基於JQuery的插件，能夠用來緩衝加載圖片。若是一個網頁很長而且有不少圖片的話，下載圖片就須要不少時間，那麼就會影響整個網頁的加載速度，而這款延遲加載插件，會經過你的滾動狀況來加載你須要看的圖片，而後它纔會從後臺請求下載圖片，最後顯示出來。經過這個插件，能夠在須要顯示圖片的時候，才下載圖片，從而能夠減小服務器的壓力，提升頁面加載速度。

Lazy Load 插件原理

修改目標img元素的src屬性爲orginal屬性，從而中斷圖片的加載。檢測滾動狀態，而後把網頁可視區域中的img的src屬性還原而後加載圖片，從而製造了一種緩衝加載的效果。代碼引入方法：

1 2 3 4 5 6 7 8 9 10 11

<script type= "text/javascript"  src= "js/jquery-1.8.3.min.js" ></script> <script type= "text/javascript"  src= "js/jquery.lazyload.js" ></script> <script type= "text/javascript" >      $(document).ready(      function ($){      $( "img" ).lazyload({           placeholder : "images/grey.gif" , //加載圖片前的佔位圖片           effect      : "fadeIn"  //加載圖片使用的效果(淡入)      });      }); </script>

可是如今，不少Javascript大牛分析得出，這個插件其實並無真正的起到緩加載的做用。確實是這樣，官方也已經給出了說明和解決方法了。

其實緣由就在於在新版的瀏覽器中，即便咱們刪除了Javascript控制的src屬性，瀏覽器仍然會去加載這個圖像。

那麼咱們該怎麼解決呢？其實也很簡單，須要直接修改HTML的結構，在img標籤中添加新的屬性，把src屬性的值指向佔位圖片，添加data-original屬性，讓其指向真正的圖像地址。好比：

1	< img  src = "img/grey.gif"  data-original = "img/example.jpg"  >

固然，在上面的代碼中咱們把頁面內的全部圖片都延遲加載了，但有些時候咱們並不但願這樣，由於有些圖片並不想然他們延遲加載，那麼咱們能夠這樣只需作：

如只緩衝加載類main下的圖像

 

1 2 3 4

$( ".main img" ).lazyload({       placeholder : "images/grey.gif" ,       effect      : "fadeIn" });

加載掛載有lazy類的圖像：

1 2 3 4

$( "img.lazy" ).lazyload({       placeholder : "images/grey.gif" ,       effect      : "fadeIn" });

其餘的以此類推，適當作一下選擇器調整就好了。

lazyload.js 高級使用方法：

下面部分來自官方文檔，將官方文檔進行了一下簡單的翻譯。

 

更周全的作法

咱們不得不思考這樣一個問題。咱們定義了這樣一個結構，那麼網頁中，就不會加載源圖像了。只有當 Javascript 執行，纔會顯示這個源圖像。若是用戶的瀏覽器不支持或者用戶關掉了支持 Javascript 的選項，那麼咱們的這個圖像就沒法顯示出來。也就是說，若是沒有 Javascript 的支持，咱們的圖像就沒法顯示出來。

應對這個問題，咱們須要引入noscript 標籤。大致思路以下：用 noscript 包含真實的圖像位置，當瀏覽器不支持 Javascript，直接顯示圖像。

1 2	<img class= "lazy"  src= "img/grey.gif"  data-original= "img/example.jpg"   width= "640"  heigh= "480" > <noscript><img src= "img/example.jpg"  width= "640"  heigh= "480" ></noscript>

對現有圖像，隱藏處理，使用 show()方法觸發顯示。

1 2 3

.lazy {    display : none ; }

這樣，若是瀏覽器不支持 Javascript，咱們自定義的 img 就不會出現，而顯示 noscript 裏面的圖像。具體實現代碼以下：

1	$( "img.lazy" ).show().lazyload();

提早加載

默認的狀況是，當你滾動到圖片位置的時候，插件開始加載。這樣，用戶可能首先看到的是一個空白圖像，而後再緩慢出現。若是你想在用戶滾動以前，提早加載這個圖像，你能夠配置一下參數。

1 2 3

$( "img.lazy" ).lazyload({      threshold : 200 });

threshold 這個參數，就是用來提早加載的。上面這個語句的意思是，當距離圖片還有200像素的時候，就開始加載圖片。

自定義觸發事件

默認的觸發事件，是滾動，當你滾動的時候，就會檢查而後加載。你可使用event屬性，設置你本身的加載事件，以後你能夠自定義觸發這個事件的條件，而後去加載圖像。

 

1 2 3

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

自定義顯示效果

默認的圖片實現效果，就是沒有效果，下載完成以後，直接顯示出來。這樣的用戶體驗並很差，你能夠設置effect屬性，來控制顯示圖片的效果。例如

1 2 3

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

fadeIn的效果就是，改變圖片的透明度，漸現的方式出現。

把圖像插入某個容器

你們若是使用智能手機的話，常常去應用網站下載應用，他們一般使用一個橫着的容器，放一些手機截圖。使用container屬性，能很輕鬆在容器中實現緩衝加載。首先，咱們須要用css定義這個容器，而後用這個插件進行加載。

1 2 3 4

#container { height: 600px; overflow: scroll; } $( "img.lazy" ).lazyload({      container: $( "#container" ) });

加載不可見圖像

有部分圖像是不可見的，咱們對其加上相似 display:none;等屬性的圖像。默認的狀況下，這個插件是不會加載隱藏的不可見圖像。若是咱們須要用它加載不可見圖像，咱們須要將 skip_invisible設置爲false，代碼以下：

1 2 3

$( "img.lazy" ).lazyload({      skip_invisible : false });

好了，這就是lazyload.js這款插件的簡單介紹了，下面有個Demo，你們能夠參考下。