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");
}
cssに以下を記述して読み込ませます
.lazyload, .lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 1000ms;
}