lazysizes を使って背景画像を遅延読み込みする方法！（レスポンシブ対応）

lazysizes を使用してレスポンシブ対応しながら背景画像を遅延読み込み（lazyload）する方法です。

公式で用意されているプラグインとして ls.unveilhooks.js というものがありますが、これは data-bg 属性に記載された画像を style="background-image: url(...);" として展開するものなので残念ながら PC / SP で画像を出し分けるということには向いていません。

レスポンシブ対応の背景画像遅延読み込みは lazysizes 単体でとても簡単に実装可能ですので紹介します。

サンプル

html

<body>
  <!-- 
    ... 途中のコンテンツは省略
   -->

  <!-- 対象の要素に .lazyload を付けておく -->
  <div class="content lazyload"></div>
  
  <!-- lazysizes は読み込むだけでOK -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js" integrity="sha256-Md1qLToewPeKjfAHU1zyPwOutccPAm5tahnaw7Osw0A=" crossorigin="anonymous"></script>
</body>

css

.content {
  height: 100vh;
  
  /* background-image 以外を指定しておく */
  background: 50% 50% / cover no-repeat;
}

/* メディアクエリは適宜書き換えてください。 */
@media screen and (max-width: 767px) {
  .content.lazyloaded {
    background-image: url('http://placehold.it/100?text=SP');
  }
}
@media screen and (min-width: 768px) {
  .content.lazyloaded {
    background-image: url('http://placehold.it/100?text=PC');
  }
}

これだけです。

<div class="content"> の要素に .lazyload を付与しました。

この要素が画面内に入ってくる前のタイミングで .lazyload が削除されて .lazyloaded が追加されますので、あとは .content.lazyloaded に対してメディアクエリで背景画像を出し分けるのみです。簡単！