$ (document) .ready () spara troppo presto

Quindi, ho bisogno di conoscere la larghezza di un elemento con javascript, il problema che ho è che la funzione si triggers troppo presto e la larghezza cambia quando il css viene applicato in modo tondo. Come ho capito, la funzione $ (document) .ready () è stata triggersta quando il documento è stato completato, ma non sembra funzionare così.

Ad ogni modo, sono sicuro che con il codice il mio problema sarà compreso (questo è un esempio semplificato):

     #target { font-family: 'Parisienne', cursive; float: left; }    
Element
$(document).ready(function(){ console.debug($('#target').outerWidth()); alert('hold on'); console.debug($('#target').outerWidth()); });

Voglio sapere la larghezza del div #target, il problema è che il codice che viene eseguito prima dell’avviso dà un output diverso da quello successivo, presumibilmente perché il font non è completamente caricato e sta misurando il div con il font predefinito.

Funziona come mi aspetto in Google Chrome, ma non su IE e Firefox.

Se si fa affidamento su contenuti esterni per essere già caricati (ad esempio immagini, tipi di carattere), è necessario utilizzare l’evento window.load

 $(window).on("load", function() { // code here }); 

Il comportamento di questi eventi è descritto in questo articolo :

C’è [a] ready-state, tuttavia noto come DOM-ready. Questo è quando il browser ha effettivamente costruito la pagina, ma potrebbe essere ancora necessario prendere alcune immagini o file flash.

Modifica: modificato la syntax per funzionare anche con jQuery 3.0 , come notato da Alex H

Quota OP:

“Come ho capito, la funzione $(document).ready() stata $(document).ready() quando il documento è stato completato,”

$(document).ready() si $(document).ready() quando il DOM (“modello object documento”) è completamente caricato e pronto per essere manipolato. Il DOM non è lo stesso del “documento”.

W3C – DOM Domande frequenti

Puoi provare la funzione $(window).load() invece …

 $(window).load(function() { // your code }); 

Attenderà che tutte le risorse della pagina (come immagini e caratteri, ecc.) Vengano caricate completamente prima di sparare.

La funzione jQuery .ready () si triggers non appena il DOM è completo. Ciò non significa che tutte le risorse (come immagini, CSS ecc.) Siano state caricate in quel momento e quindi le dimensioni degli elementi siano soggette a modifiche.

Usa $ (window) .load () se hai bisogno della dimensione di un elemento.

L’evento “pronto” si triggers quando il DOM viene caricato, il che significa che è ansible lavorare in sicurezza con il markup.

Per aspettare che tutte le risorse siano caricate (css, immagini, javascript esterno …), preferisci usare l’evento load.

 $(window).load(function() { ... }); 

Potresti usare $(window).load() , ma questo attenderà tutte le risorse (es. Immagini, ecc.). Se si desidera solo attendere il caricamento del font, è ansible provare qualcosa del genere:

  

Disclaimer: non sono completamente sicuro che funzionerà. L’evento onload può essere triggersto non appena viene analizzato il foglio di stile, ma prima che le sue risorse esterne siano state scaricate. Forse potresti aggiungere un e inserire invece il gestore onload sull’immagine.

Ho assolutamente, ripetutamente visto lo stesso problema in IE9 e IE10. La chiamata jquery ready () e uno dei miei

non esiste. Se lo rilevo e poi richiamo di nuovo dopo un breve timeout () funziona correttamente.

La mia soluzione, per sicurezza, era duplice:

  1. Aggiungi uno

  2. Controlla se $ ('# lastElementInTheDocument'). Lunghezza> 0

Sì, riconosco che questi sono brutti hack. Tuttavia, quando ready () non funziona come previsto, è necessaria una sorta di work-around!

Per inciso, la soluzione "corretta" probabilmente implica l'impostazione $ .holdReady nell'intestazione e la cancellazione alla fine del documento. Ma naturalmente, la soluzione veramente corretta è che ready () funzioni.

Il problema $ (document) .ready () si triggers troppo presto a volte può succedere perché hai dichiarato la funzione jQuery onReady in modo errato.

Se hai problemi, assicurati che la tua funzione sia dichiarata esattamente nello stesso modo:

  $(document).ready(function() { // put your code here for what you want to do when the page loads. }); 

Ad esempio, se hai dimenticato la parte della funzione anonima, il codice verrà comunque eseguito, ma verrà eseguito “fuori servizio”.

 console.log('1'); $(document).ready() { console.log('3'); } console.log('2'); 

questo uscirà

 1 3 2