onload of just created 4 img element

Question

hi I have a div as an answer container of a question that I append 4 IMG tags as answer on every click

and I want to create a loader so when all 4 img loaded it to show them here is some of my code

<div class="answer"></div>



   $(".question").text(items[0].title);
for (let k = 0; k < items[0].answers.length; k++) {
  $(".answer").append(
    "<img value=" + k + " src='/assets/img/" + items[0].answers[k] + "'/>"
  );
}
let i = 1;

$("body").on("click", ".answer img", function() {
  questionNum++;
  $(".curent-num").text(questionNum);
  let curentAnswer = $(this).attr("value");
  if (i < items.length) {
    $(".question").text(items[i].title);
    $(".answer").empty();
    for (let j = 0; j < items[i].answers.length; j++) {
      $(".answer").append(
        "<img value=" + j + " src='/assets/img/" + items[i].answers[j] + "'/>"
      );
    }
    i++;
    answers.push(curentAnswer);
  } else {
    answers.push(curentAnswer);
    $(".second-page").addClass("d-none");
    $(".third-page").removeClass("d-none");
    $(".top-nav a").removeClass("second-page-backBtn");
    $(".top-nav a")
      .removeClass("second-page-backBtn")
      .addClass("third-page-backBtn");
    console.log(answers);
  }
  if (questionNum >= 10) {
    questionNum = 10;
    $(".curent-num").text(questionNum);
  }
});