Как дождаться загрузки div до вызова другой функции?

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> 

Я загружаю подстраницы в выбранный div моей главной страницы с помощью функции jQuery. Чтобы синхронизировать высоту главного div и правого столбца, я использую метод jQuery .css(). Я хотел, чтобы изменение размера выглядело гладко, поэтому я решил его выполнить следующие шаги:
1. Загрузите содержимое подстраницы в невидимый темп div.
2. Рассчитайте высоту этого темпа div.
3. Измените высоту главного div и правого столбца на высоту этого временного div.
4. Загрузите содержимое подстраницы в главный div.

Однако, я знаю, что мой нынешний способ сделать это довольно хромой из-за использования setTimeout() как импровизация ожидания контента нагрузки - Я попытался с помощью $(document).ready, но не повезло. Использование глобальной переменной (var href) также не выглядит lege artis, но передача this Оператор $("a.load").click Функция apply() тоже не работает.

Как это сделать «правильно»?

Answer 1

Использование нагрузки обратного вызова

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

Answer 2

Вы можете прикрепить функцию обратного вызова в функции JQuery load:

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

см: http://api.jquery.com/load/

Answer 3

с JQuery

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

например. использовать:

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

здесь без JQuery

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

например использовать:

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