JavaScriptプログラムに関する各種メモ書き

背景画像の遅延読み込み(lazy load)をするlazysizes.js

● lazysizes.js

https://github.com/aFarkas/lazysizes

画像を画面に表示される直前に読み込む lazysizes.js 軽量でjQueryも必要ありません。

 

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

背景画像を遅延読み込みするには下記コードを追加します

<script>
  document.addEventListener('lazybeforeunveil', function(e){
      var bg = e.target.getAttribute('data-bg');
      if(bg){
          e.target.style.backgroundImage = 'url(' + bg + ')';
      }
  });
</script>

HTMLは以下のように修正します

<p style="background-image:url(large.jpg)">テスト</p>

 ↓

<p class="lazyload" data-bg="large.jpg">テスト</p>

● lazysize.js で画像を読み込み時にフェードインさせる

cssに以下を記述して読み込ませます

.lazyload, .lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 1000ms;
}

関連エントリー

No.1026
11/28 12:28

edit

画像