images breaking scrollHeight

[Michdd]

I have a div that will have images appended to it, and everytime something is added I make sure that it's scrolled to the bottom of the div using scrollTop = scrolHeight. The issue is that if I append Images to this div it doesn't scroll completely to the bottom. I figured this was because the images weren't loaded yet so it didn't know the height of the images, and this seemed to be proven true by the fact that if after the image loaded I added just text it would work fine. My idea of a solution was to load the Image in an Image() object and set a function to the onload event to only append it after the image is completely loaded, however I still get this effect of the div not being completely scrolled down. Here's an example of what I tried:

 

function ...(...)
{
     var something = new Image();
     something.onload = appendImage('someimage.jpg');
     something.src = 'someimage.jpg';
}
function appendImage(image)
{
     ....
}