The Height of my Image is 0 on First Load - Javascript -

summary
code news page loads articles database using php, in 3x3 box format. uses both images , text, , way works takes info php database, places inside array, , posts on page depending on if first letter 'i' or 't'. if it's 't', posts <p>, if it's 'i', however, there more complications.

later in script, takes clientheight of each <p> or <img> , uses them create div height, finds row of 3 , sets div around height of biggest div. text works fine, images have minor issue.

the problem

after loading of page, alert tells me height of pictures are, , number returns first after loading page 0. code:

for (var = 0; < panels.length; i++) {     if (panels[i][ten].slice(0, 1) == "i") { //ten article number         var img = new image();         img.id = 'text'+i+id[ten];         img.src = panels[i][ten].slice(2, panels[i][ten].length);          document.getelementbyid('column'+i+id[ten]).appendchild(img);         img.onload = function(){             console.log(this.height); //tested moving around         }         document.getelementbyid('text'+i+id[ten]).style.width = '100%';         document.getelementbyid('column'+i+id[ten]).style.height = img.clientheight + "px";         alert(img.clientheight + "px"); //at first, returns 0     } } 

this code worked in different section of program, different function, , solved onload statement, yet here doesn't anything. stated, works after reload, first load when alert returns 0.