JavaScript｜LazysizesでCSS背景画像を遅延読み込みする方法

定番のls.unveilhooks.jsは使わず、JavaScriptを6行書き加えるだけです。

HTML

<div data-bg="images/sample.jpg" class="lazyload"></div>

Java Script

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

参考リンク

Lazyload background-image with lazysizes

I want to load a background-image "lazy" with the library They do ment...

stackoverflow.com

User Amit Dwivedi

Stack Overflow | The World’s Largest Online Community for Developers

stackoverflow.com