jQuery.Lazy() 圖片延遲載入

簡介

當頁面的圖片檔案又大又多時，就可以考慮用 Lazy 函式庫做到不一次下載，而是當畫面滑到時才開始下載圖片。

這個函式庫除了圖片可以延遲載入，背景也可以。

官網: http://jquery.eisbehr.de/lazy/

起手式

可到官網提供的下載後在網頁內載入

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

或是使用 CDN

<!-- jsDeliver -->
   <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
   <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>

   <!-- cdnjs -->
   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>

還是 NPM 下載

$ npm install jquery-lazy
$ bower install jquery-lazy

執行

載入後就可以用基本的程式碼加入功能使用，依照官網提供的作法，在 HTML 在使用功能的標籤加上相同的 Class Name 就會被 JavaScript 內的 $('.lazy').Lazy() 抓到並執行。

<!-- load images the lazy way -->
   <img class="lazy" data-src="path/to/image.jpg" />

   <!-- load background images of other element types -->
   <div class="lazy" data-src="path/to/image.jpg"></div>

$(function() {
    $('.lazy').Lazy();
});

設定

可設定圖片延遲的時間、圖片來源的路徑、設定佔位符、圖片尺寸… ，都可以在 Lazy() 內以物件的形式加入。

預設值

$('.lazy').Lazy({
  // 設定屬性值
  scrollDirection: 'vertical',
  effect: 'fadeIn',
  visibleOnly: true,
  onError: function(element) {
    console.log('error loading ' + element.data('src'));
  }
});

參考文件 http://jquery.eisbehr.de/lazy/#configuration