lazysizes-好用的延遲加載JS插件

此插件可直接引入lazysizes即可

<script src="lazysizes.min.js"></script>

  延遲加載(lazy load)是(也稱為懶加載)Hibernate3關聯關系對象默認的加載方式，延遲加載機制是為了避免一些無謂的性能開銷而提出來的，所謂延遲加載就是當在真正需要數據的時候，才真正執行數據加載操作。
  瀏覽器加載過程中，由於圖片過多導致加載速度過慢，那么我們只需要在“看得見”的地方加載圖片，而“看不見”的地方會跟隨滾動條的滾動而加載。
  此教程只針對於固定寬高的圖片，詳細請看 http://afarkas.github.io/lazysizes/#examples
step1 默認加載

<img data-src="moren.jpg" class="lazyload"  width="500" height="500"/>

  step2 從模糊到清晰

<img src="vague.jpg" data-src="clear.jpg" class="lazyload" width="500" height="500"/>

  預先定義一張品質較差的圖片，之后再通過懶加載展示品質高且清晰的圖片。

  step3 響應式圖片

<img data-sizes="auto" class="lazyload" data-src="img500w.jpg" data-srcset="img240w.jpg 240w, img320w.jpg 320w,img500w.jpg 500w, img800w.jpg 800w, img1024w.jpg 1024w," /

  在開發過程中，項目需要用到響應式布局，在移動端的情況下，我們不需要用到太過清晰的圖片，以免造成用戶流量的損失。