在DomContentLoaded之后加载所有图像

Question

我希望在“ DOMContentLoaded”之后和“ Load”之前加载所有图像

我发现了一种添加标记“ data-src =“的方法，当DOMContentLoaded完成时，将其替换为“ src =”

$(document).ready(function init() {
  var imgDefer = document.getElementsByTagName('img');
  for (var i=0; i<imgDefer.length; i++) {
    if(imgDefer[i].getAttribute('data-src')) {
      imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
    }
  }
  document.getElementById("lform-area").style.backgroundImage="url(/images/background-footer.png)";
  document.getElementById("adv-area").style.backgroundImage="url(/images/counter-2265066_1920.jpg)";
})

但是问题是，当我查看html时，它看起来像（img data-src =“ image.png”）一样古老。

是否存在其他更简单的方式来加载“ DOMContentLoaded”之后且“加载”之前在CSS中包含背景图像的所有图像？