Ottieni le dimensioni effettive dell'immagine, dopo il ridimensionamento

Question

Ho una pagina piena di miniature ridimensionate con css a 150x150 e quando faccio clic su una miniatura, la pagina si attenua e L'immagine viene mostrata nelle sue dimensioni reali.

Attualmente, devo creare manualmente un array che includa l'altezza effettiva di tutte le immagini. Per risolvere un problema di progettazione + meno operazioni manuali della mia galleria, ho bisogno di ottenere l'altezza effettiva di un'immagine, dopo averla ridimensionata (CSS).

ho provato:

var imageheight = document.getElementById(imageid).height; 

E:

var imageheight = $('#' + imageid).height(); 

Ma entrambi restituiscono l'attributo 150px assegnato con il CSS. Come posso risolvere questo? Grazie

Answer 1

Un modo per farlo è creare un oggetto immagine separato.

function getImageDimensions(path,callback){ 
    var img = new Image(); 
    img.onload = function(){ 
     callback({ 
      width : img.width, 
      height : img.height 
     }); 
    } 
    img.src = path; 
} 

getImageDimensions('image_src',function(data){ 
    var img = data; 

    //img.width 
    //img.height 

}); 

In questo modo, si utilizzerà la stessa immagine ma non quella sul DOM, che ha dimensioni modificate. Le immagini memorizzate nella cache, per quanto ne so, verranno riciclate utilizzando questo metodo. Quindi non preoccuparti delle richieste HTTP aggiuntive.

Answer 2

avete la KWS 'naturali' per aiutarvi:

con js:

var imageheight = document.getElementById(imageid).naturalHeight; 

o con jQuery

var imageheight = $('#' + imageid).naturalHeight;