JSFiddle - React, Tailwind, and code Playground
HTML
<div id='imgContainer' style='display: none;'></div>
JavaScript
function preloadImg(containerId, imgUrl, imageId) {
var i = document.createElement('img'); // or new Image()
// may be you need to set the element id...
i.id = imageId;
// here handle on load event
i.onload = function () {
var container = document.getElementById(containerId);
// finally the new image is loaded, you can trigger your action
container.appendChild(this);
};
// This is the last step, set the url and start the image download.
i.src = imgUrl;
}
preloadImg('imgContainer', 'http://static.blogo.it/autoblog/th/2013/1/p116931-300x170.jpg?t=1358862629', 'image1');
preloadImg('imgContainer', 'http://static.blogo.it/autoblog/th/2013/1/p116885-300x170.jpg?t=1358847063', 'image2');
preloadImg('imgContainer', 'http://static.blogo.it/autoblog/th/2013/1/p117251-620x350.jpg?t=1358934220', 'image3');
var container = document.getElementById('imgContainer');
container.style.display = 'block';