1

我有一个带有图像的页面，有两个选项：显示图像完整浏览器高度或 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);

仍然对问题的原因持开放态度。

4

2 回答 2

0

在设置新width的.heightsrc

于 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 回答