Question

I have a page with an image, and two options: Show image full browser height or witdh.
i’m changing image src with javascript(image resizing is trough php).

Now if ill switch from height to width – new image is smaller and everything works. But when i’ll try to switch to width(new image is bigger), chrome loads new image, and changes it, but does not change image size. Image has changed – watermark that php places, changes and chrome inspertors shows that new image is actually bigger.

Markup is like so:

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

With other browsers than crhome, everything works.

Javascript code is here:

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

Okay, found a solution:

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

Still open to cause of the problem.

Answer 1

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