Answers for "html lazy loading background images without code"

html lazy load images

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

background image load defer

function init() {
  var imgDefer = document.querySelectorAll('div[data-src]');
  var style = "background-image: url({url})";
  for (var i = 0; i < imgDefer.length; i++) {

    imgDefer[i].setAttribute('style', style.replace("{url}", imgDefer[i].getAttribute('data-src')));

  }
}

window.onload = init;