Largeur native de l'image en jQuery

Question

Avec jQuery, je change le src d’une image en cliquant

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

Le problème est que la largeur de la nouvelle image est différente de celle de l’ancienne. COMMENT puis-je obtenir la largeur NATIVE de la nouvelle image (comme la petite flèche qui obtient cela dans dreamweaver

Answer 1

C’est la façon simple de le faire en javascript. Cela devrait être facile à intégrer dans votre code.

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

Answer 2

L'ancienne image avait-elle une largeur et une hauteur définies? Si vous utilisez $ (image) .width ("), la largeur devrait être ramenée à ce qu'elle était avant l'application des modifications de largeur (de la même manière pour la hauteur). Je ne pense pas que cela fonctionnera pour les images dont la largeur a été définie via CSS ou la propriété bien. Après avoir restauré l’ancienne largeur, vous pouvez utiliser .outerWidth () pour obtenir la largeur de l’image.

Answer 3

Vous souhaitez obtenir la largeur réelle de l'image avant de la modifier, puis définissez la nouvelle image sur cette largeur. vous pouvez le faire avec $ (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

ce code retourne toujours zéro '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);

POURQUOI ???