Come attendere il caricamento di div prima di chiamare un'altra funzione?

Question

<script> 
var href; 

    $(function(){ 
     $("a.load").click(function (e) { 
      e.preventDefault(); 
      href = this; 

      // cover all bookmarks 
      $("."+($(this).attr("class"))).css('border-bottom', 'solid 1px black'); 
      $("."+($(this).attr("class"))).css('background-color', '#F5F5F5'); 

      // uncover chosen bookmark 
      $("#"+($(this).attr("id"))).css('border-bottom', 'solid 2px white'); 
      $("#"+($(this).attr("id"))).css('background-color', 'white'); 

      $("#tempMain").load($(this).attr("href")); // load content to temp div 

      setTimeout(function() {resizeDivs();}, 500); // synchronize size of #main and #rightColumn 
     }); 

    }); 

    function resizeDivs() { 
     var heightNew = $("#tempMain").css("height"); 
     $("#rightColumn").css('height',heightNew); 
     $("#main").css('height',heightNew); 
     // $('#main').load($(href).attr('href')); 
     $("#main").html($("#tempMain").html()); // is faster than loading again 
    } 
</script> 

Sto caricando pagine secondarie in un div selezionato della mia pagina principale da una funzione jQuery. Per sincronizzare l'altezza della colonna principale e quella della colonna destra sto usando il metodo .css() di jQuery. Volevo che il ridimensionamento sembrasse regolare, quindi l'ho risolto nei seguenti passaggi:
1. Caricare il contenuto di una sottopagina su un div invisibile temp.
2. Calcolare l'altezza di quel div di temperatura.
3. Modificare l'altezza della divisione principale e della colonna destra all'altezza di tale divisione della temperatura.
4. Caricare il contenuto di una sottopagina sul div principale.

Tuttavia, sono consapevole che il mio modo attuale di fare questo è abbastanza zoppo a causa dell'utilizzo di setTimeout() come un'improvvisazione di aspettare per i contenuti da carico - Ho provato con $(document).ready ma senza fortuna. Anche l'utilizzo di una variabile globale (var href) non sembra essere legis artis, ma l'operando dell'operatore this della funzione $("a.load").click tramite apply() non ha funzionato neanche.

Come si fa "nel modo giusto"?

Answer 1

Usa carico di richiamata

$("#tempMain").load($(this).attr("href"),function(){ 
    resizeDivs(); 
    // do other stuff load is completed 
}); 

Answer 2

È possibile allegare una richiamata nella funzione jQuery load:

$("#tempMain").load($(this).attr("href"), resizeDivs); 

vedi: http://api.jquery.com/load/

Answer 3

con jQuery

function waitForElement(elementPath, callBack){ 
    window.setTimeout(function(){ 
    if($(elementPath).length){ 
     callBack(elementPath, $(elementPath)); 
    }else{ 
     waitForElement(elementPath, callBack); 
    } 
    },500) 
} 

ad es. utilizzare:

waitForElement("#myDiv",function(){ 
    console.log("done"); 
}); 

ecco colpo jquery

function waitForElement(elementId, callBack){ 
    window.setTimeout(function(){ 
    var element = document.getElementById(elementId); 
    if(element){ 
     callBack(elementId, element); 
    }else{ 
     waitForElement(elementId, callBack); 
    } 
    },500) 
} 

esempio da usare:

waitForElement("yourId",function(){ 
    console.log("done"); 
});