load a function after another has loaded

Issue

I am having a problem with a equal height script that makes my 4 divs in a row equal heights. In one div, I have neosmart-stream, which loads my latest facebook post inside the div. The other div's are supposed to match that one in height, the problem is is that the div heights match the tallest div that loads first, the one with the catalogue picture in it.

I want to be able to run the equal heights script after my facebook post has loaded.

Here is the link to the site: http://www.guitarworldcityarcade.com.au/ It applies to the 4 dark grey boxes underneath the rotating banner.

Here is the code for the equal heights:

<script>
  equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.module');
});

$(window).resize(function(){
  equalheight('.module');
});
  </script>

And here is the code for the facebook posts:

<div class="module">

<h1>News</h1>

<script type='text/javascript' src='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-includes/jquery.js'></script>
    
<script type='text/javascript' src='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-core/jquery.neosmart.stream.js'></script>
    
<link href='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-core/core.css' type='text/css' rel='stylesheet' />
    
<link href='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-content/themes/base/style.css' type='text/css' rel='stylesheet' />
    
<script type='text/javascript'>(function(window){window.onload=function(){jQuery(function(){jQuery('#nss').neosmartStream({introFadeIn:695,masonry:false,cache_time:60,theme:'base',path:'http://www.guitarworldcityarcade.com.au/neosmart-stream/',channel_group:'all',auto_refresh:true,auto_refresh_time:60})})}})(window);</script>

This is only some of the script, the facebook posts is a plugin. The four divs have the .module class

One has window.load(function()) and the other window.onload=function(), would these be conflicting? Is there a way I can set one to load so many milliseconds after the other?

Solution

I cheated a little with this one. the resize script activates when the page is loaded and when it is resized. So I added another event listener so that the script activates when the user scrolls down. This works since the boxes that resize are all below the fold on all screens and devices anyway (except for exceptionally long screens but how often do you come across them?) I will have to figure it out properly but this works for now.

Answered By - Ellouise