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

ls.unveilhooks.jsは不要。JavaScriptを5行書き加えるだけ。

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

この記事は役に立ちましたか?

はい(以下をポチッと)

ブログランキング・にほんブログ村へ

コメントを残す