Larghezza nativa dell'immagine in jquery

Question

Con jQuery, cambio lo src di un'immagine al clic

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

Il problema è che la NUOVA larghezza dell'immagine è diversa dalla vecchia. COME ottengo la larghezza NATIVA della nuova immagine (come la piccola freccia che la ottiene in Dreamweaver

Answer 1

Questo è il semplice modo javascript per farlo. Dovrebbe essere facile integrarlo nel tuo codice.

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'immagine vecchia aveva una larghezza e un'altezza impostate su di essa? Se usi $ (image) .width (" ") dovrebbe reimpostare la larghezza su quella che era prima di applicare qualsiasi modifica della larghezza (analogamente per l'altezza). Non penso che funzionerà per le immagini che avevano la loro larghezza impostata tramite CSS o proprietà. Dopo aver ripristinato la larghezza precedente, puoi utilizzare .outerWidth () per ottenere la larghezza dell'immagine.

Answer 3

Si desidera ottenere la larghezza reale dell'immagine prima di modificarla, quindi impostare la nuova immagine su quella larghezza. puoi farlo con $ (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

questo codice restituisce sempre 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);

PERCHÉ ???