Gif-Bild ändert Größe erst nach vollständigem Laden

Question

Die Größe des Gifs wird erst geändert, wenn das Gif vollständig geladen ist. Wie kann ich die Größe des Gifs schon beim Laden ändern?

Ich verwende mehrere GIFs in verschiedenen Größen, so dass ich nicht einfach die üblichen 100 % Höhe und Breite verwenden kann, da ich die Aspekte korrekt halten möchte.

Das Skript, mit dem ich die Größe des Gifs ändere

<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>

Das php zur Anzeige des Bildes

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

Answer 1

Verwenden Sie window.onload Ereignis, um sicherzustellen, dass die Größenänderung zu Beginn des Fensterladens wirksam wird.

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

Oder verstecken Sie Ihr Bild in css und zeigen Sie es in Ihrer Funktion nach der Größenänderung.

Answer 2

Eine Möglichkeit ist, das Bild auszublenden, bis es geladen ist (z. B. durch Hinzufügen einer CSS-Klasse), und es dann in Ihrem resizeToMax entfernen Sie die CSS-Klasse, die das Bild ausblendet.

Answer 3

Die onload-Ereignisse werden nur ausgelöst, wenn das Bild fertig geladen ist. In der Zwischenzeit könnten Sie mit den CSS-Eigenschaften Breite und / oder Höhe, oder sogar max-Breite und max-Höhe spielen.

Das Risiko besteht darin, dass Sie die Bildproportionen noch nicht kennen, so dass das Bild beim Laden verzerrt aussehen kann.

IMHO ist die beste Lösung, das Bild durch einen Platzhalter zu ersetzen, das Bild zu laden, ohne es anzuzeigen (z. B. außerhalb des Bildschirmfensters), dann die Größe zu ändern und es an der richtigen Stelle anzuzeigen, wobei der Platzhalter entfernt wird.