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

С jQuery я меняю src изображения по клику

$("#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


image jquery width
person menardmam    schedule 29.10.2009    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Это простой способ сделать это с помощью javascript. Это должно быть легко интегрировать в ваш код.

var newimage = new Image();
newimage.src = 'retouche-hr' + newlinkimage + '-a.jpg'; // path to image
var width = newimage.width;
var height = newimage.height;
person Scott Saunders    schedule 29.10.2009
comment
убедитесь, что путь к изображению является допустимым путем к реальному изображению - person Scott Saunders; 29.10.2009
comment
Изображение должно быть уже загружено, когда вы вызываете высоту/ширину. Вторая строка загружает изображение, но его загрузка может быть не завершена к 3-й или 4-й строке. - person Scott Saunders; 29.10.2009
comment
проблема именно в том, что изображение не загружается.... я открыл еще один вопрос и получил ответ: заголовок stackoverflow.com/questions/1645166/ - person menardmam; 30.10.2009

arrow_upward
2
arrow_downward

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

person Willson Haw    schedule 29.10.2009

arrow_upward
1
arrow_downward

Вы хотите получить реальную ширину изображения перед его изменением, а затем установить новое изображение на эту ширину. вы можете сделать это с помощью $(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);
person GSto    schedule 29.10.2009

arrow_upward
1
arrow_downward

этот код всегда возвращает ноль '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);

ЗАЧЕМ ???

person menardmam    schedule 29.10.2009