Gif图片仅在完全加载后才调整大小

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

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.

Answer 2

您可能能够做的一件事是隐藏图像，直到图像被加载（例如，添加CSS类），然后在resizeToMax函数中，删除隐藏图像的CSS类。

Answer 3

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.