Question

Gif只会在gif完全加载后重新调整大小。如何在加载时重新调整gif的大小？

我使用多个GIF，因此它们有不同的尺寸，所以我不能只做通常的100％高度和宽度，我想保持方面正确。

我用来调整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>

用于显示图片的php

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

Answer 1

使用window.onload事件确保您的大小调整在窗口加载开始时有效。

<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">';
?>

或者在css中隐藏您的图像并在调整大小后将其显示在您的函数中。

Answer 2

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

Answer 3

onload事件仅在图像加载完成后触发。同时，您可以使用css宽度和/或高度属性，甚至是max-width和max-height。

风险在于您还不知道图像比例，因此图像在加载时看起来可能会变形。

恕我直言，最好的解决方案是用占位符替换图像，加载图像而不显示图像（例如，在屏幕窗口之外），然后调整大小并将其显示在正确位置以移除占位符。

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

3 个答案: