Собственная ширина изображения в jquery

Question

С помощью jQuery я меняю источник изображения при клике

$("#thumb li img").click(function() {
var newlinkimage = $(this).attr("src");

newlinkimage = newlinkimage.substring(14,17);

    $("#avant img").attr("src", 'retouche-hr' + newlinkimage + '-a.jpg');
    $("#apres img").attr("src", 'retouche-hr' +newlinkimage + '-b.jpg');

Проблема в том, что НОВАЯ ширина изображения отличается от старой. КАК я могу получить НАТИВНУЮ ширину нового изображения (как маленькая стрелка, которая получает это в dreamweaver

Answer 1

Это простой способ сделать это на JavaScript. Должно быть легко интегрировать это в ваш код.

var newimage = new Image();
newimage.src = 'retouche-hr' + newlinkimage + '-a.jpg'; // path to image
var width = newimage.width;
var height = newimage.height;

Answer 2

Установлено ли для старого изображения ширина и высота? Если вы используете $ (image) .width (""), он должен сбросить ширину до того, какой она была до применения каких-либо изменений ширины (аналогично для высоты). Я не думаю, что это будет работать для изображений, чья ширина была установлена ​​с помощью CSS или свойства. После сброса к старой ширине вы можете использовать .outerWidth (), чтобы получить ширину изображения.

Answer 3

этот код всегда возвращает ноль '0'

    var newimage = new Image();
    newimage.src = 'retouche-hr' + newlinkimage.substring(14,17) + '-a.jpg'; 
    var width = newimage.naturalWidth;
    var height = newimage.naturalHeight;
    alert (width);

ПОЧЕМУ ???

Answer 4

Вы хотите получить реальную ширину изображения перед его изменением, а затем установить новое изображение на эту ширину. Вы можете сделать это с $ (img) .load:

var pic_real_width;
var pic_real_height;

$(img).load(function() {
    // need to remove these in of case img-element has set width and height
    $(this).removeAttr("width")
           .removeAttr("height");

    pic_real_width = this.width;
    pic_real_height = this.height;
});

$("#thumb li img").click(function() {
var newlinkimage = $(this).attr("src");

newlinkimage = newlinkimage.substring(14,17);

        $("#avant img").attr("src", 'retouche-hr' + newlinkimage + '-a.jpg').width(pic_real_width);
        $("#apres img").attr("src", 'retouche-hr' +newlinkimage + '-b.jpg').width(pic_real_width);