JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sakiniYonde">
  <img src="http://lorempixel.com/200/150/cats/" class="image"/>
  <img src="http://lorempixel.com/200/200/cats/" class="image"/>
  <img src="http://lorempixel.com/300/200/cats/" class="image"/>
  <img src="http://lorempixel.com/500/300/cats/" class="image"/>
  <img src="http://lorempixel.com/150/200/cats/" class="image"/>
 </div>

JavaScript

var startOnLoadImage = function($target) {
  var d = new $.Deferred();
  var loaded = 0;
  var max = $target.length;
  $target.each(function() {
    var targetObj = new Image();
    $(targetObj).on('load', function(){
      loaded++;
      if (loaded == max){
        d.resolve();
      }
    });
    targetObj.src = this.src;
  });
  return d.promise();
};

$(function(){
  $img = $('#sakiniYonde .image');
  startOnLoadImage($img).done(function() {
    console.log('loaded');
    $img.css('border', '2px solid red');
  });
});