Question

我有一个带图像的页面，还有两个选项：显示图像完整浏览器高度或者witdh。我正在用javascript更改图像src（图像调整大小是通过php）。

现在如果生病从高处切换到宽度 - 新图像更小，一切正常。但是当我尝试切换到宽度（新图像更大）时，chrome会加载新图像并更改它，但不会更改图像大小。图像已经改变 - php放置的水印，更改和chrome inspertors显示新图像实际上更大。

标记是这样的：

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

除了crhome之外的其他浏览器，一切正常。

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

仍然可以解决问题。

Answer 1

在设置新width之前，请确保图片已移除height和src个样式。

Answer 2

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

更改src后，图像不会在chrome中调整大小

2 个答案: