jquery .ready e altezza elemento

Question

Potrebbe sembrare una domanda banale, ma ho riscontrato un problema durante l'utilizzo di jQuery. Quando cerco di ottenere l'altezza per un elemento in un .ready, viene sempre dato zero.

$(function() { 
    $('#my-elem').height() // Always gives me zero. 
}); 

Se metto il codice in un ritardo con setTimeout() intorno al controllo di altezza (diciamo di .5s) quindi l'altezza è correttamente riferito a me. Immagino che questo sia dovuto al fatto che gli stili non hanno ancora avuto la possibilità di essere applicati?

L'unica soluzione che ho trovato a questo problema è utilizzare un intervallo per eseguire il polling dell'altezza dell'elemento finché non diventa zero, ma questo mi sembra eccessivo. C'è un modo migliore?

Answer 1

L'evento document.ready segnala che il DOM HTML è pronto per l'accesso tramite Javascript, ma che non significa che gli elementi abbiano già eseguito il rendering.

In realtà, questa è tutta la baracca dietro ready: si tratta di un mezzo per iniziare la manipolazione del documento HTML DOM senza dover attendere che la pagina termini il caricamento. È sicuro supporre che a document.ready, i tuoi elementi non siano ancora visualizzati sulla pagina.

Ora, questo viene fornito con un avvertimento: se gli elementi non sono ancora stati resi, come può il browser/Javascript sapere qual è l'altezza di risoluzione? .height() potrebbe dare zero a document.ready a causa di questo. Probabilmente è meglio aspettare fino al load invece di ready quando si tratta di tirare le dimensioni della scatola dal layout.