Gif image only resizes after fully loaded - php

Question

Gif will only resize after the gif is fully loaded. How do I make the gif resized whilst even loading?
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.
The script I use to resize the gif
<script>
function resizeToMax(id){
myImage = new Image()
var img = document.getElementById(id);
myImage.src = img.src;
if(myImage.width / document.body.clientWidth > myImage.height / document.body.clientHeight){
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
</script>
The php to display the image
<?php
echo '<img id="image" onload="resizeToMax(this.id)" src="gifs/' . $myTokens[1] . '/' . $myTokens[2] . '.gif">';
?>

Answer 1

One thing you may be able to do is have the image hidden until it is loaded (add a CSS class for example), and then in your resizeToMax function, remove the CSS class that is hiding the image.

Answer 2

The onload events fire only when image has finished loading.
In the meanwhile, you could play with the css width and / or height properties, or even max-width and max-height.
The risk is that you don't know the image proportions yet, so the image may looks distorted ehile loading.
IMHO the best solution is to replace the image with a placeholder, load the image without displaying it (eg. outside of the screen window), then resizing and displaying it in the correct position removing the placeholder.

Answer 3

Use window.onload event to make sure your resizing will be effective at beginning of window loading.
<script>
window.onload = function() {
resizeToMax("image");
};
function resizeToMax(id){
myImage = new Image()
var img = document.getElementById(id);
myImage.src = img.src;
if(myImage.width / document.body.clientWidth > myImage.height / document.body.clientHeight){
img.style.width = "100%";
} else {
img.style.height = "100%";
}
document.getElementById(id).style.display = "block";
}
</script>
<?php
echo '<img id="image" style="display:none;" src="gifs/' . $myTokens[1] . '/' . $myTokens[2] . '.gif">';
?>
Or hide your image in css and show it in your function after your resizing.