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

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

● lazysizes.js

https://github.com/aFarkas/lazysizes

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

 

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

CDNで読み込むには  https://cdnjs.com/libraries/lazysizes
こちらから取得します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js" integrity="sha512-TmDwFLhg3UA4ZG0Eb4MIyT1O1Mb+Oww5kFG0uHqXsdbyZz9DcvYQhKpGgNkamAI6h2lGGZq2X8ftOJvF/XjTUg==" crossorigin="anonymous"></script>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/plugins/unveilhooks/ls.unveilhooks.min.js">

または直接スクリプトを記述します。

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

HTMLは以下のように修正します classlazyload をつけてdata-bg 画像の URL をセットします

<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
08/24 08:59

edit

画像