Come caricare una funzione jQuery solo dopo che il documento finitura carico

Question

strana situazione:

Sto costruendo una barra dei menu utilizzando jQuery e CSS.
Nel mio file JavaScript, ho una funzione di on-ready in questo modo:

$(document).ready(function(e) { 
    mark_active_menu(); 
} 

e ...

function mark_active_menu() { 
    var elementWidth = $("nav li").width(); 
    alert(elementWidth); 
} 

Per qualche ragione, anche prima tutto la finitura del documento di carico, sono ricevere il messaggio di avviso con una larghezza errata. Solo quando rilascio il messaggio, il resto del documento viene caricato e sto ottenendo la larghezza corretta come dovrebbe essere.

Perché la mia funzione viene chiamata PRIMA di caricare tutto il documento? C'è un modo per caricare la funzione solo DOPO che un certo elemento ha completato il caricamento (Esempio: l'elemento nav)?

Answer 1

È possibile utilizzare window.load, verrà attivato dopo che tutta la risorsa ha completato il caricamento.

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

L'evento di carico al termine del processo di caricamento documento. A questo punto, tutti gli oggetti nel documento sono nel DOM, e tutti le immagini e sub-frame hanno terminato il caricamento, Reference

Answer 2

A dire il vero, Prova finestra load

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

Answer 3

Prova sull'evento carico finestra:

$(window).load(function() { 
    //Stuff here 
}); 

Answer 4

Tutte le soluzioni attuali sono solo trattare i sintomi del problema principale. Se vuoi che il tuo gestore esegua dopo il tutti i tuoi carichi ajax, allora puoi usare una promessa.

var ajax1 = $.ajax(); 
var ajax2 = $.ajax(); 

jQuery(function($) { 
    $.when.apply($, [ajax1, ajax2]).done(function() { 
     // your code here 
    }); 
}); 

Answer 5

Prima (a volte, non caricare assolutamente all'inizio, pochi millisecondi dopo (0-200ms circa)):

$(document).ready(function(){ 
$('body').hide(0); 
}); 

Dopo:

$(window).load(function(){ 
$('body').delay(500).show(0); 
}); 

Answer 6

Nella mia situazione di lavoro con AJAX e HTML. Ho lo stesso problema con le funzioni $ (document) .ready() e $ (window) .load(). Ho risolto questo problema aggiungendo il gestore del mio evento (che dovrebbe funzionare su HTML DOC), alla funzione jQuery che viene eseguita subito dopo che AJAX era terminato. Leggi questo: " jQuery.post()" (terzo parametro nella funzione).

Nel mio codice che assomiglia a questo:

var RequestRootFolderContent = function(){ 
    $.post(
     'PHP/IncludeFiles/FolderContent.inc.php', 
     function(data){ 
      $('[class~="folder-content"]').html(data); 

      //Here what you need 
      $('[class~="file"]').dblclick(function(){ 
       alert("Double click"); 
      }); 
     } 
    ) 
}