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>

背景画像を遅延読み込みするには下記のようにします。

lazysizes.js は クラス名「lazyload」が付いたエレメントがブラウザに表示される直前に画像を読み込みクラス名を「lazyloaded」に変更します。
なので、

html側 : クラス名「lazyload」
css側 : クラス名「lazyloaded」

で処理をすればokです。

html

<div class="my-image-001 lazyload">test</div>

css

  .my-image-001.lazyloaded {
    background-image: url("my001.jpg");
  }

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

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

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

関連エントリー

No.1026
01/14 17:22

edit

画像