LazysizesでCSS背景画像を遅延読み込みする【JavaScript】

[talks text=’

ls.unveilhooks.jsは必要なし。JavaScriptを6行書き加えるだけでOK。

‘]

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 + ')';
  }
});