JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<img src="https://paxarcana.files.wordpress.com/2008/03/lemon.jpg" alt="(O_X)O---(O_OQ)" />

<a href="#" onClick="loadObjects()">click me</a>
 
</body>

CSS

.loading {
  background: pink;
  display: inline-block; width: 250px; height: 250px;
  font-family: "Comic Sans"; font-size: 30px; font-style: italic; text-align: center;
}

img {
  max-width: 250px; max-height: 250px;
}

JavaScript

loadObjects = function() {
  /* LOAD OBJECTS */
  $("img, embed, iframe").each(function() {
    var obj = $(this);

    obj.attr("src", obj.data("objsrc")).ready(function() {
      obj.fadeIn(1000, "linear").prev(".loading").fadeOut(750, "linear", function() {
        $(this).remove();
      });
    });
  });
}

$(document).ready(function() {
	/* *** PREVENT OBJECTS FROM LOADING *** */
	$("img, embed, iframe").each(function() {
		var obj = $(this);
		obj.data("objsrc", obj.attr("src"));
		obj.hide().attr("src", "").before("<span class=\"loading\">loading . . .</span>");
	});
  

});