lozad.js：懶加載神器

Lozad.js 是基於 IntersectionObserver API 的輕量級、高性能、可配置的純 JavaScript而且無依賴的懶加載器，其可以被用於進行圖片、iframe 等多種形式的元素。經過gzip壓縮事後，僅僅535字節大小，相對於經常使用的jquery.lazyload.js來講，lozad.js實力碾壓，雖然jquery.lazyload.js也才幾kb大小。在github上，至今短短的一個月的時間，已經收穫了2300+的star。

傳送門：阮一峯老師IntersectionObserver使用教程

懶加載

懶加載其實就是延遲加載。通俗的講就是，當你訪問一個頁面的時候，先不設置img元素或者其餘元素的background-image的圖片的src（還有其餘的懶加載形式），只有當它們進入視口的纔開始加載，這樣可能節省帶寬從而提升網頁性能，頁面加載速度更加快、減輕服務器的壓力。

通常懶加載實現的方法爲不設置資源文件的src，而把真是的url放置在data-url（也可根據本身喜愛設置）屬性裏面，這樣在載入頁面的時候不會對資源文件發起請求。當網頁滾動條滾動到須要加載這個標籤的時候，設置真實的url從而開始加載資源文件。

lozad

安裝

$ npm install --save lozad
//or
$ yarn add lozad
//or
$ bower install lozad

而後根據ES6標準或者CommonJS的規範將lozad模塊引入，固然也能夠用CDN引入

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.js"></script>

使用

在html中，給須要懶加載的元素加上lozad的類名，並將src改成data-src，以下所示：

<img class='lozad' data-src='image.png' />

接下來，你所要作的就僅僅只是將lozad實例化

const observer = lozad();
observer.observe();

或者使用個性化設置：

const observer = lozad('.lozad',{
  rootMargin: '10px 0px',
  threshold: 0.1
});
observer.observe();

rootMargin和threshold均爲IntersectionObserver的參數，具體使用參考阮一峯老師的教程吧。

要是你想要在加載該元素的同時執行某些函數時：

lozad('.lozad',{
  load: function(el){
      console.log('loading element');
  }
});

類似的，當你使用背景圖片的時候，你能夠這麼操做：

<div class='lozad' data-background-image='image.png'>
</div>

以上就是lozad的基本用法了，顯而易見，lozad至關的便捷。

兼容性

可是lozad也並非沒有缺點。由於它使用了IntersectionObserver的API，致使兼容性很差，chrome也剛從51版本開始使用，更不用說那些上古年代的瀏覽器了。

PC端兼容性：

移動端兼容性：

文章同步於我的小站