lazysizes-好用的消極式載入JS外掛程式

標籤：files   延遲   .com   項目   log   使用者   機制   git   baidu   

此外掛程式可直接引入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," /

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

 

 

lazysizes-好用的消極式載入JS外掛程式