JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_%28business%29.svg/1200px-IMG_%28business%29.svg.png" class="image_1">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_%28business%29.svg/1200px-IMG_%28business%29.svg.png" class="image_2">
<div id="loader-wrapper">
loader-wrapper
</div>

CSS

img{
  max-width:200px;
  display:block;
}

JavaScript

var loading = 0;
if($(".image_2").height() > 10){
console.log("image_2 is visible and loading is done");
$('#loader-wrapper').append("- the images are already loaded so I change color").css("color", "red");
};
(function() {
  $(".image_1").on('load', function() {
    console.log('loading image_1');
    loading++;
    checkLoading();
  });

  $(".image_2").on('load', function() {
    console.log('loading image_2');
    loading++;
    checkLoading();
  });
})();

function checkLoading() {
  console.log('inside Loading check');
  if (loading == 2) {
    console.log('loading done' + loading);
    $('#loader-wrapper').fadeOut('fast').remove();
  }
}