title: onload of just created 4 img element
body: <p>hi I have a div as an answer container of a question that I append 4 IMG tags as answer on every click</p>
  
  <p>and I want to create a loader so when all 4 img loaded it to show them here is some of my code </p>
  
  <pre><code>&lt;div class="answer"&gt;&lt;/div&gt;
  
  
  
     $(".question").text(items[0].title);
  for (let k = 0; k &lt; items[0].answers.length; k++) {
    $(".answer").append(
      "&lt;img value=" + k + " src='/assets/img/" + items[0].answers[k] + "'/&gt;"
    );
  }
  let i = 1;
  
  $("body").on("click", ".answer img", function() {
    questionNum++;
    $(".curent-num").text(questionNum);
    let curentAnswer = $(this).attr("value");
    if (i &lt; items.length) {
      $(".question").text(items[i].title);
      $(".answer").empty();
      for (let j = 0; j &lt; items[i].answers.length; j++) {
        $(".answer").append(
          "&lt;img value=" + j + " src='/assets/img/" + items[i].answers[j] + "'/&gt;"
        );
      }
      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 &gt;= 10) {
      questionNum = 10;
      $(".curent-num").text(questionNum);
    }
  });
  </code></pre>