好用的jQuery圖片延遲讀取套件Lazy Load

Lazy Load幫高度較長的網頁，進行延遲載入圖片，尚未瀏覽到該部份時，不會載入視角外的圖片，提高效率

GitHub Star: 6,900
Javascripting Overall: -
瀏覽器: Chrome、Firefox和IE7+
RWD: 支援
License: MIT

---

《安裝》

• CDN

    <!-- jQuery v1.9.1 -->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- Lazy Load v2.0.0-beta.2 -->
    <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js"></script>
  

• npm

    $ npm install lazyload
  

• Yarn

    $ yarn add lazyload
  

---

《範例》

• 延遲載入效果

    <img data-src="【原圖URL】">
    <script>
    	$( "img" ).lazyload();
    </script>
  

• 響應式效果

  

    <img class="example" data-src="【原圖URL】" data-srcset="【特殊尺寸圖片URL】 480w, 【特殊尺寸圖片URL】 640w, 【特殊尺寸圖片URL】 1024w" />
    <!--
    	屬性設定[註1]
    	data-src: 當瀏覽器不支援data-srcset時，則顯示原圖
    	data-srcset: 當螢幕解析度不同時，則顯示特定尺寸圖片
    -->
    <script>
    	$( ".example").lazyload();
    </script>
  

  [註1]

  屬性	描述
  data-src	當瀏覽器不支援data-srcset時，則顯示原圖
  data-srcset	當螢幕解析度不同時，則顯示特定尺寸圖片

---

《延伸》

1. Vanilla JavaScript Lazy Load Plugin
2. tuupola/jquery_lazyload: Vanilla JavaScript plugin for lazyloading images