1

画像と 2 つのオプションを含むページがあります。画像をブラウザの高さまたは幅いっぱいに表示します。私はjavascriptで画像のsrcを変更しています（画像のサイズ変更はphp経由です）。

高さから幅に切り替えると、新しい画像が小さくなり、すべてが機能します。しかし、幅（新しい画像が大きい）に切り替えようとすると、クロムは新しい画像をロードして変更しますが、画像サイズは変更しません。画像が変更されました - PHP が配置、変更、およびクロム インスペクターが新しい画像が実際に大きいことを示す透かし。

マークアップは次のようになります。

<div class="big-image" rel="52">
   <span class="thumbnail" style="float: left;">
    <img src="#IMAGE_URL#">
   </span>
 </div>

Chrome 以外のブラウザでは、すべてが機能します。

Javascript コードは次のとおりです。

function setViewType(type) {
    type = type || getViewType();
    Session.set('album_view_type', type);
    $('.album-type').removeClass('disabled');
    $('#album-type-'+type).addClass('disabled');

    if (type == 'width') {
            $('.actions').css({
                'opacity': '0.3'
            });
    } else {
        $('.actions').css({
            'opacity': ''
        });
    }

    var $img = $('.big-image').find('img');
    $img.attr('src', $img.data('src_'+type));
}

さて、解決策を見つけました：

var $img = $('.big-image').find('img');
var img = new Image();
img.onload = function () {
    $img.attr('src', $img.data('src_'+type)).css({
        'width': this.width,
        'height': this.height
    });
};
img.src = $img.data('src_'+type);

問題の原因はまだ開いています。

4

2 に答える 2

0

widthnew を設定する前に、画像にとheightスタイルが削除されていることを確認してくださいsrc。

于 2012-06-07T08:20:13.070 に答える
0 
var $img = $('.big-image').find('img');
var img = new Image();
img.onload = function () {
    $img.attr('src', $img.data('src_'+type)).css({
        'width': this.width,
        'height': this.height
    });
};
img.src = $img.data('src_'+type);
于 2012-06-07T08:40:53.310 に答える