Gif image only resizes after fully loaded
<p>Gif will only resize after the gif is fully loaded. How do I make the gif resized whilst even loading?</p>

<p>I use multiple gifs so they come in different sizes so I can not just do the usual 100% height and width, I want to keep the aspects correct.</p>

<p><strong>The script I use to resize the gif</strong></p>

<pre><code>&lt;script&gt;
function resizeToMax(id){
    myImage = new Image() 
    var img = document.getElementById(id);
    myImage.src = img.src; 
    if(myImage.width / document.body.clientWidth &gt; myImage.height / document.body.clientHeight){
        img.style.width = "100%";
    } else {
        img.style.height = "100%";
    }
}
&lt;/script&gt;
</code></pre>

<p><strong>The php to display the image</strong></p>

<pre><code>&lt;?php 
echo '&lt;img id="image" onload="resizeToMax(this.id)" src="gifs/' . $myTokens[1] . '/' . $myTokens[2] . '.gif"&gt;';
?&gt;   
</code></pre>
