JSFiddle - React, Tailwind, and code Playground
HTML
<div id="imageContainer"></div>
<div id="overlay"></div>
CSS
#overlay {
height:100px;
width: 100px;
background-color: red;
}
JavaScript
var amountOfImagesLoaded = 0;
var img1 = new Image(),
img2 = new Image(),
img3 = new Image();
img1.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Chihuahua_puppy_001.jpg/220px-Chihuahua_puppy_001.jpg";
img2.src = "http://www.pupmart.co.uk/wp-content/uploads/2011/10/puppies-rehoming.jpg";
img3.src = "http://www.makems.com/graphic/puppies-2.jpg";
var imageContainer = document.getElementById("imageContainer");
//This setTimeout it's only here so you can get a glimpse of what is happening, in your real application you wouldn't use it
setTimeout(function() {
imageContainer.appendChild(img1);
imageContainer.appendChild(img2);
imageContainer.appendChild(img3);
}, 800);
var imageOnLoadFunction = function(){
amountOfImagesLoaded++;
if(amountOfImagesLoaded === 3) {
jQuery("#overlay").fadeOut();
}
};
img1.onload = img2.onload = img3.onload = imageOnLoadFunction;