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

イベントを使用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

できるかもしれないことの1つは、画像が読み込まれるまで画像を非表示にして（たとえば、CSSクラスを追加する）、resizeToMax 関数で画像を非表示にしているCSSクラスを削除することです。

于 2012-11-15T15:50:23.860 に答える
0

onload イベントは、画像の読み込みが完了したときにのみ発生します。その間、css の width および / または height プロパティ、さらには max-width および max-height で遊ぶことができます。

リスクは、画像の縦横比がまだわからないことです。そのため、読み込み中に画像が歪んで見える可能性があります。

私見の最善の解決策は、画像をプレースホルダーに置き換え、画像を表示せずに（たとえば、画面ウィンドウの外側に）ロードしてから、サイズを変更して正しい位置に表示し、プレースホルダーを削除することです。

于 2012-11-15T15:51:54.340 に答える