Загрузить все изображения после DomContentLoaded

Question

Я хочу, чтобы все изображения загружались после "DOMContentLoaded" и до "Load"

Я нахожу 1 способ добавить к тегу "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?