display a gif after it has been loaded
<p>So I have a <code>&lt;img  onload="resizeImage()" src="movie.gif"&gt;</code> on my website and I only want to show it after it has been fully loaded. The gif is loaded from my sql database through php so the img src is different from page to page. I also have a resize to make the image fullsize</p>

<pre><code>&lt;script type="text/javascript"&gt;

function resizeImage()
{
  var window_height = document.body.clientHeight
  var window_width  = document.body.clientWidth
  var image_width   = document.images[0].width
  var image_height  = document.images[0].height
  var height_ratio  = image_height / window_height
  var width_ratio   = image_width / window_width
  if (height_ratio &gt; width_ratio)
  {
    document.images[0].style.width  = "auto"
    document.images[0].style.height = "100%"
  }
  else
  {
    document.images[0].style.width  = "100%"
    document.images[0].style.height = "auto"
  }
}
&lt;/script&gt;
</code></pre>

<p>Is it possible to put the gif in a div and do this</p>

<pre><code>#div {
     display:none;
{
</code></pre>

<p>and then after the image is loaded change the div to this</p>

<pre><code>#div {
     display:block;
{
</code></pre>
