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

この記事は最終更新から2年以上経過しています。内容が古くなっているかもしれません。。

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

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

はい

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

コメントを残す