Gif圖片僅在完全加載后才調整大小

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的width和/或height屬性，甚至可以使用max-width和max-height。

風險是您尚不知道圖像比例，因此圖像看起來在半透明加載時會變形。

恕我直言，最好的解決方案是用占位符替換圖像，在不顯示圖像的情況下加載圖像（例如，在屏幕窗口之外），然后調整大小並將其顯示在正確的位置，以除去占位符。