2

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

3 回答 3

0

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

于 2012-11-15T15:50:23.860 回答
0

使用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 中隐藏您的图像并在调整大小后将其显示在您的函数中。

于 2012-11-15T15:49:23.037 回答
0

仅当图像完成加载时才会触发 onload 事件。同时，您可以使用 css 的宽度和/或高度属性，甚至是最大宽度和最大高度。

风险是您还不知道图像比例，因此图像在加载时可能看起来失真。

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

于 2012-11-15T15:51:54.340 回答