Ottieni l'altezza dell'immagine all'interno di un div nascosto

Question

Voglio ottenere l'altezza/larghezza di un'immagine all'interno di un div-containter nascosto, ma .height() e .width() restituiscono entrambi 0 (come previsto).

$('body').append('<div id="init"><img id="myimg" src="someimage.png" /></div>'); 
$('#init').hide(); 
$('#myimg').height(); // == 0 
$('#myimg').width(); // == 0 

Come posso ottenere la corretta altezza/larghezza dell'immagine? Ho bisogno di prendere alcune decisioni :-)

Con i migliori saluti, Biggie

Answer 1

sua perché l'immagine non ha ancora caricato .....

$('body').append('<div id="init"><img id="myimg" src="something.png" /></div>'); 
$('#init').hide(); 

$('#myimg').bind("load",function(){ 
    alert(this.height) //works 
})​ 

heres un test: http://jsfiddle.net/WMpSy/

Answer 2

Rendere il div temporaneamente visibile al fine di calcolare l'altezza o nascondere la div fuori dallo schermo, invece di utilizzare visualizzazione: Nessuno. Ho usato il primo approccio e ho trovato che fosse abbastanza veloce da non vedere mai l'elemento.

Answer 3

Non è possibile nasconderlo se si desidera l'altezza e la larghezza corrette, ma è possibile impostare in modo che sia fuori dallo schermo e quindi effettivamente nascosto. Prova questo:

var hiddenDiv = $('<div id="init"><img id="myimg" src="someimage.png" /></div>').appendTo('body').css({ 
    'position': 'absolute', 
    'top': -9999 
}); 

var img = hiddenDiv.children('img'); 
img.height(); 
img.width(); 

Answer 4

sembra che è necessario calcolare la larghezza altezza & di un'immagine. se è così, ci stai pensando troppo.

Answer 5

si deve usare find()

$('body').find('#myimg').width(); 

o

$('body').find('#myimg').attr("width"); 

siccome si è aggiunto dopo il DOM è stato caricato

Answer 6

Non sono sicuro che si può fare con jQuery (o javascript a tutti). Ho avuto un problema simile con altezze e larghezze riportate erroneamente sul caricamento/nascosto img. È possibile, tuttavia, aspettare che i carichi di immagini, ottenere è corretta altezza e la larghezza e poi nascondere il genitore ... in questo modo:

var height, width; 

$('#myimg').load(function() { 
    height = $(this).height(); 
    width = $(this).width(); 
    $('#init').hide(); 
} 

Answer 7

ho appena eseguito attraverso la soluzione per questo, ciò che si fa è invece che si basano su jQuery per fare questo per voi. Invece, ottenere l'elemento javascript e ottenere l'altezza fuori dell'elemento stesso, come segue:

var img = hiddenDiv.children('img'); 

var imgHeight = img.get(0).height; 
var imgWidth = img.get(0).width; 

Procedimento jQuery get(0) ci permette di ottenere in corrispondenza dell'elemento DOM sottostante e interessante abbastanza, le dimensioni dell'elemento DOM no modificare.

Una nota, tuttavia, per motivi di prestazioni, è necessario memorizzare nella cache lo img.get(0) se si prevede di utilizzarlo di più.

jQuery get method documentation

Answer 8

Ho avuto un problema simile. Il fatto è che se un'immagine o div contenente un'immagine ha style = "display: none" allora la sua altezza css = 0. Ho scoperto che le funzioni height() e width() davano valori errati, ad es. 0! La soluzione per me era assicurarsi che le immagini avessero i loro attributi impostati in modo che anche se fossero nascosti i valori fossero ancora accessibili.Quindi utilizzare:

$ ('# testImg'). Attr ('height') e $ ('# testImg'). Attr ('width') per ottenere l'altezza e la larghezza dell'immagine.

Answer 9

Sì, è perché l'immagine non è ancora caricato e questa è la mia soluzione:

$('<img src="My Image URL" />').appendTo('body').css({ 
       'position': 'absolute', 
       'top': -1 
      }).load(function() { 
       console.log('Image width: ' + $(this).width()); 
       console.log('Image height: ' + $(this).height()); 
       $(this).remove(); 
      });