JSFiddle - React, Tailwind, and code Playground

HTML

<div class="area1">
  <img width="200" height="200" src="http://orig10.deviantart.net/d700/f/2008/315/4/e/red_mushroom_by_slashingoverlord.png" />
  <img width="200" height="200" src="http://piq.codeus.net/static/media/userpics/piq_58977_400x400.png" />
  <img width="200" height="200" src="http://lorempixel.com/200/200/?=0" />
  <img width="200" height="200" src="http://lorempixel.com/200/200/?=1" />
  <img width="200" height="200" src="http://lorempixel.com/200/200/?=2" />
  <img width="200" height="200" src="http://lorempixel.com/200/200/?=3" />
  <img width="200" height="200" src="http://lorempixel.com/200/200/?=4" />
  <img width="200" height="200" src="http://lorempixel.com/200/200/?=5" />
  <img width="200" height="200" src="http://lorempixel.com/200/200/?=6" />
  <img width="200" height="200" src="http://lorempixel.com/200/200/?=7" />
</div>

CSS

.area1 img {
  display:none;
}

JavaScript

$(document).ready(function() {
  var temp = "";
  var displaythumbnailbox = $(".area1");

  var lis = $(".area1 img") //.hide()
    .each(function(i) {
      $(this).fadeIn(i * 250, function() {
        console.log("finish load all image");
      });
    });

  lis.promise().then(function() {
    alert("finish display the last image");
  })
})