Fire javascript after images have loaded
<p>I have a div that can be dynaimcally changed with an ajax script:</p>

<pre><code>{
     var xmlHttp = GetXmlHttpObject();
     var url="/dashboard/ajax/images_pop_ajax.asp";
     if (!xmlHttp){
          alert ("Browser does not support HTTP Request")
          return
     }
     xmlHttp.onreadystatechange=function()
     {
          if (xmlHttp.readyState == 1)
          {
               document.getElementById("images_inner").innerHTML = LoadingAlert;
          }
          if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
          {
               var result = xmlHttp.responseText;
               document.getElementById('images_inner').innerHTML = result;
               window.onload = function(){AdjustColumns();}
          }
     };
     xmlHttp.open("GET", url , true)
     xmlHttp.send(null)
}

function GetXmlHttpObject()
{
     var objXMLHttp=null;
     if (window.XMLHttpRequest)
     {
          objXMLHttp=new XMLHttpRequest();
     }
     else if (window.ActiveXObject)
     {
          objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     return objXMLHttp;
}
</code></pre>

<p>When the <strong>images_pop_ajax.asp</strong> file runs it returns 8 images, which are then placed into the div tab id images_inner.  Once this is complete, i want to adjust the columns of my page so everything is aligned. so I run this script:</p>

<pre><code>function AdjustColumns()
{
     var ImgCol = document.getElementById('images_inner').offsetHeight;
     var ClassCol = 820;
     if (ImgCol &gt; 574)
     {
          var ToAdd = eval(ImgCol - 574);
          document.getElementById('class_inner').style.height = eval(ClassCol + ToAdd) + 'px';
     }
}
</code></pre>

<p>The problem I have is that the  AdjustColumns() script runs before all the images are loaded so consequently the columns dont line up.  How can I get it to run, after the images have loaded?</p>

<p>Many thanks in advance,</p>

<p>neojakey</p>
