JQuery $ (window) .load не работает должным образом с шаблоном Jinja

Question

Я пытаюсь использовать JQuery для определения загрузки содержимого моих страниц и изменения размера divs (панели навигации и содержимого) на моей странице в зависимости от того, как много содержания есть. (Например, если есть небольшое количество текста, то высота дивы являются 800px, но при навигации и содержания дивы разные высот установите оба равны наибольшую высоту два.

 function resizePage(){ 
      var defaultSize = 600; 
      var sidebarH = $("nav").height(); 
      var articleH = $("article").height(); 

      if((sidebarH < defaultSize) || (articleH < defaultSize)){ 
       $("nav").css({'height': defaultSize}); 
       $("article").css({'height': defaultSize}); 
      } 
      else{ 
       if(sidebarH <= articleH){ 
        $("nav").css({'height': articleH}); 
       } 
       else{ 
        $("article").css({'height': sidebarH}); 
       } 
      } 
     } 

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

Когда я модифицировал html-код ... теперь используя шаблоны Jinja ... кажется, что данные шаблона загружаются после загрузки окна, поэтому он не изменяется правильно. Есть ли способ, которым JQuery может определить, когда все данные шаблона были загружен? Или я могу идти о фиксации это по-другому?

Спасибо за ваше время!

Answer 1

Просто необходимо изменить || до & &.

$ (window) .load в сравнении с $ (document). Уже здесь не было никакой разницы.

Answer 2

Попробуйте .ready() вместо:

$(document).ready(function() { 
    function resizePage() { 
     var defaultSize = 600; 
     var sidebarH = $("nav").height(); 
     var articleH = $("article").height(); 

     if((sidebarH < defaultSize) || (articleH < defaultSize)) { 
      $("nav").css({'height': defaultSize}); 
      $("article").css({'height': defaultSize}); 
     } 
     else{ 
      if(sidebarH <= articleH){ 
       $("nav").css({'height': articleH}); 
      } 
      else{ 
       $("article").css({'height': sidebarH}); 
      } 
     } 
    }  

    resizePage(); // You are calling it here 
});