JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<img src="https://placekitten.com/200/300">
<button>Click to load extra</button>
<div></div>

JavaScript

//Loading the initial image, it works fine because it runs on window load.
console.log('Loading first image...')
$(window).on('load',function(){
    console.log('First image loaded');
});

var loadingImages = [];
$('button').on('click',function(){

	//Get unique identifier + add to 'loading'
  var n = $('div').find("img").length;
  loadingImages.push(n);
  
  //Add image with unique classname
  $('div').append('<img data-n="'+n+'" src="https://placekitten.com/200/300">');
  
  //Attach load listener to new image
  $('div').find("img[data-n="+n+"]").load(function(){
    var n = $(this).attr('data-n');
    
    //Remove from 'loading'
    var index = loadingImages.indexOf(n);
    loadingImages.splice(index, 1);
    
    //if 'loading' empty, run function
    if(loadingImages.length==0){
  		alert("Loaded All Images");
    }
  });
});