Is there a way to hide an image but keep the containing div blank with the same dimensions? I want it to appear as if no content was there, maintaining the original width and height.
For example: http://jsfiddle.net/rJuWL/1/
After hiding, "Second!" appears before "First!", but I would like it to display as: First! (blank) Second!
HTML
<html>
<body>
<div>First!</div>
<div class="loading">
<img id="loading" src="http://preloaders.net/preloaders/284/preview.gif" class="none"/>
<div>Second!</div>
</div>
</body>
CSS
.none{display:none}
.loading{width: 32px;height:32px;}
Javascript
showLoading();
function showLoading() {
$("#loading").hide();
$("#loading").show().delay(2500).fadeOut('10');
}