Run loadScreen while image does not load

Question

In my gallery, when the user clicks next or previous, the code below runs:

function galeria(BASE_URL, nGaleria) {
  $('.splash-load').removeClass('hide');

  var conteudo = "<img id='imagemCarousel"+numeroImagem+"' class='d-block w-100' src='" + BASE_URL + "assets/img/galeria/1-encontro-regional-de-educacao (" + numeroImagem + ").jpg'>";
  var id = $('.carousel-item.active').attr('id');
  var nomeClasse = ".carousel-" + numeroImagem;
  var imagemCarregada = "#imagemCarousel"+numeroImagem;

  if (!$(nomeClasse).length) {
    $('.carousel-item.active').removeClass('active');
    $('.carousel-inner').append(conteudo);
  } else {
    $('.carousel-item.active').removeClass('active');
    $(nomeClasse).addClass('active');
  }
  $('.splash-load').addClass('hide');
}

$('.splash-load').removeClass('hide'); is the load div that should appear when the image is being loaded.

The problem I’m having is that even if I make the div appear at the beginning of the function and remove at the end, when the execution of the function ends the image has not yet been loaded... that way in fact you can’t even see the load appearing.

What I need to know is how I see if this image has already been loaded into the function.

Thank you!