Imagem de largura nativa no jQuery

Question

Com o jQuery, eu mudei o SRC de uma imagem em clique

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

O problema é que a nova largura da imagem é diferente da antiga. Como faço para obter a largura nativa da nova imagem (como a pequena flecha que a obtém no Dreamweaver

Answer 1

Esta é a maneira clara de JavaScript de fazê -lo. Deve ser fácil integrar isso ao seu código.

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

Answer 2

A imagem antiga tinha uma largura e altura definida para ela? Se você usar $ (imagem) .Width (""), ele deve redefinir a largura de volta ao que era antes de aplicar qualquer alteração de largura (da mesma forma para a altura). Eu não acho que isso funcionará para imagens que tinham sua largura definida via CSS ou propriedade. Depois de redefinir a largura antiga, você pode usar .outerwidth () para obter a largura da imagem.

Answer 3

Você deseja obter a largura real da imagem antes de alterá -la e definir a nova imagem para essa largura. Você pode fazer isso com $ (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);

Answer 4

Este código sempre retorna zero '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);

POR QUÊ ???