JSFiddle - React, Tailwind, and code Playground

by Jaydeep Mor

HTML

<div id="loaderimage" style="background-image: url(https://homepages.cae.wisc.edu/~ece533/images/arctichare.pngs); border-radius:3px;overflow:hidden;min-height:100%;width: 100%;padding-top:50%;box-shadow: background-repeat: no-repeat !important;background-position: center !important;background-size: cover"></div>
<div>
    Test Second Div.
</div>
<div>
    Test Third Div.
</div>
<div>
    Test Fourth Div.
</div>
<div>
    Test Fifth Div.
</div>
<div>
    Test Six Div.
</div>
<div>
    Test Seven Div.
</div>
<div>
    Test Eight Div.
</div>
<div>
    Test Nine Div.
</div>

JavaScript

class validateImage extends Image {
  	constructor(elementId) {
    		super(elementId);
    		this.getImageBackground(elementId);
  	}

  	getImageBackground(elementId) {
    		this.elementId 			 = elementId;
    		this.image 					 = document.getElementById(this.elementId);
        this.style 					 = this.image.currentStyle || window.getComputedStyle(this.image, false);
        this.backgroundImage = this.style.backgroundImage.slice(4, -1).replace(/['"]/g, "");
        super.src					 	 = this.backgroundImage;
  	}

    validate() {
        super.onerror = function() {
          	this.removeArea();
        }
    }

  	removeArea() {
      // console.log(this.style);
      this.image.style.height = "0px";
      this.image.style.width  = "0px";
      this.image.style.paddingTop = "0px";
  	}
}
var validate = new validateImage("loaderimage");
validate.validate();