JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<img src="https://upload.wikimedia.org/wikipedia/commons/1/13/05S_Jan_7_2012_1035Z.jpg" />
<img src="https://placehold.it/998x999.png" />
<img src="https://placehold.it/997x999.png" />
<img src="https://placehold.it/996x999.png" />
<img src="https://placehold.it/995x999.png" />
<img src="https://placehold.it/994x999.png" />
<img src="https://placehold.it/993x999.png" />
<img src="https://placehold.it/992x999.png" />
<img src="https://placehold.it/991x999.png" />
<img src="https://placehold.it/990x999.png" />
<img src="https://placehold.it/999x991.png" />
<img src="https://placehold.it/999x992.png" />
<img src="https://placehold.it/999x993.png">
<img src="https://placehold.it/999x994.png" />
<script>
  var imgList = document.getElementsByTagName('img');

  for (var i = 0; i < 3; i++) {
    imgList[i].insertAdjacentHTML('beforebegin', '<div id="loading' + i + '" style="height:' + imgList[i].clientHeight + 'px;width:' + imgList[i].clientWidth + 'px;background: url(\'http://loading.io/assets/img/default-loader.gif\') center no-repeat;z-index:9999;"></div>');
    imgList[i].style.display = "none";
    imgList[i].onload = function() {
      this.style.display = "block";
      this.previousSibling.remove();
    };
  }

</script>

CSS

img {
  display: block;
  width: 600px;
  height: 450px;
  border: 1px solid black;
  border-radius: 5px;
}