JSFiddle - React, Tailwind, and code Playground

by Jake

HTML

<div id="loader">
loading...
</div>

<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/500x100.png?text=Test+Image">
<img src="https://via.placeholder.com/400x100.png?text=Test+Image">
<img src="https://via.placeholder.com/300x100.png?text=Test+Image">
<img src="https://via.placeholder.com/700x100.png?text=Test+Image">
<img src="https://via.placeholder.com/650x100.png?text=Test+Image">
<img src="https://via.placeholder.com/550x100.png?text=Test+Image">
<img src="https://via.placeholder.com/450x100.png?text=Test+Image">
<img src="https://via.placeholder.com/350x100.png?text=Test+Image">
<img src="https://via.placeholder.com/250x100.png?text=Test+Image">
<img src="https://via.placeholder.com/730x100.png?text=Test+Image">
<img src="https://via.placeholder.com/735x100.png?text=Test+Image">
<img src="https://via.placeholder.com/630x100.png?text=Test+Image">
<img src="https://via.placeholder.com/530x100.png?text=Test+Image">
<img src="https://via.placeholder.com/430x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">

CSS

#loader {
  background: red;
  font-size: 5em;
  position: fixed;
  top: 10vh;
  left: 10vw;
  height: 100px;
  width: 100px;
}

JavaScript

(function(){
  const imgs = document.querySelectorAll('img');
  const loader = document.getElementById('loader');
  if( ! imgs.length )
    return;

  const hideLoader = function(){
    loader.style.display = 'none';
  };

  const areAllImagesLoaded = function(){
    for(let i=0;i<imgs.length;i++){
      if( imgs[i].complete !== true )
        return false;
    }
    return true;
  };

  const checkImages = function() {
    if( areAllImagesLoaded() ) {
      hideLoader();
      return;
    }
    window.setTimeout(checkImages, 250);
  }

  checkImages();


})();